Select2: как выбрать связанные результаты - PullRequest
Новая
       9

Select2: как выбрать связанные результаты

0 голосов
/ 07 апреля 2020

Я пытаюсь понять, возможно ли это с помощью библиотеки Select2. Скажем, у меня есть список данных следующим образом:

  • Яблоко
  • Баскетбол
  • Банан
  • Оранжевый
  • Футбол

Есть ли способ показать только Apple, Banana и Orange, когда я печатаю «фрукты», и показывать Баскетбол и Футбол, когда я печатаю «Спорт». Имеется в виду «функциональность« связанный поиск / тегирование »?

Спасибо!

1 Ответ

0 голосов
/ 07 апреля 2020

вы можете сделать что-то вроде этого:

Документация поиска: https://select2.org/searching

function matchCustom(params, data) {
  const term = $.trim(params.term);

  if (term === "fruit" || term === "sports") {
    if (data.type === term) {
      return data;  
    }
    return null;
  } 

  return data;
}

const data = [
  {
    id: 0,
    type: "fruit",
    text: "apple"
  },
  {
    id: 1,
    type: "fruit",
    text: "orange"
  },
  {
    id: 2,
    type: "sports",
    text: "football"
  },
  {
    id: 3,
    type: "sports",
    text: "basketball"
  }
];

$(document).ready(() => {
  $(".js-example-basic-single").select2({ data, matcher: matchCustom });
});
.js-example-basic-single {
  width: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  </head>

  <body>
    <div id="app"></div>
   <select class="js-example-basic-single" name="state"></select>
    </select>
  </body>
</html>
...