Select2 ищет похожие ключевые слова в тегах - PullRequest
Новая
       30

Select2 ищет похожие ключевые слова в тегах

0 голосов
/ 02 октября 2019

В настоящее время я разрабатываю приложение для конвертации валют, используя select2 для загрузки валют.

Я хочу, чтобы пользователь мог искать валюту, печатая страну. Например:

  • Если должен появиться поиск Америка -> USD
  • Если поиск Испания , Италия -> EUR должен появиться

Я продолжаю просматривать документы Select2, но могу 'не могу найти, как добавить похожие ключевые слова в мои теги валют.

См. код ниже: 

<select id="to" class="js-example-templating" onchange="convertCurrencyRight()" onkeyup="convertCurrencyRight()" >
        <option value="USD" selected>USD </option>
        <option value="EUR"  >EUR </option>
</select>

Изображение проблемы

Любая идеякак это исправить?

спасибо

1 Ответ

0 голосов
/ 03 октября 2019

Использование пользовательских matcher и data() функций 

$(".select").select2({
  matcher: matchCustom
});

function matchCustom(params, data) {
  // If there are no search terms, return all of the data
  if ($.trim(params.term) === '') {
    return data;
  }

  // Do not display the item if there is no 'text' property
  if (typeof data.text === 'undefined') {
    return null;
  }

  // `params.term` should be the term that is used for searching
  // `data.text` is the text that is displayed for the data object
  if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
    return data;
  }

  // custom search using lookup data
  if ($(data.element).data('lookup').toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
    return data;
  }

  // Return `null` if the term should not be displayed
  return null;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select" style="width: 200px">
  <option value="USD" data-lookup="America" selected>USD </option>
  <option value="EUR" data-lookup="Spain, Italy">EUR </option>
</select>
...