принудительно заставлять selectize.js только показывать опции, которые начинаются с ввода пользователя - PullRequest
Новая
       20

принудительно заставлять selectize.js только показывать опции, которые начинаются с ввода пользователя

0 голосов
/ 24 августа 2018

Я использую selectize.js.В настоящее время это выглядит так:

enter image description here

Показывает не только слова, начинающиеся с 'arm', но также слова (или варианты), содержащие 'arm'как подстрока где-то еще.

Я хотел бы заставить функцию показывать только те слова (или опции), которые начинаются с' arm '.

Я проверил документацию по использованию на https://github.com/selectize/selectize.js/blob/master/docs/usage.md но не смог придумать, как это решить.

У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 24 августа 2018

Вы можете использовать свойство score, которое перебирает весь список и сортирует элементы. 1 является наиболее релевантным, 0 считается не соответствующим, и элемент исключается. Зная это, мы можем написать нашу собственную функцию:)

Функция счета вызывается каждый раз, когда вводится новый символ. Внутренняя функция Score затем проверяет каждый элемент, вот его структура. 

item = {
  text: 'Armband',
  value: 'Armband',
}

Зная это, мы берем item.text, сделаем все буквы строчными (удалите .toLowerCase(), если вы этого не хотите) и сравните его со значением search (также строчными) . Когда item.text начинается со значения в search, возвращается 1 - элемент должен быть включен - иначе 0 и элемент исключается из списка. Вот вся функция для score. 

score: function(search) {
  var score = this.getScoreFunction(search);
  return function(item) {
    return item.text
      .toLowerCase()
      .startsWith(search.toLowerCase()) ? 1 : 0;
  };
},

Ниже приведен рабочий пример, чтобы увидеть его в действии. 

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(search, pos) {
    return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
  };
}

$('.select').selectize({
  placeholder: 'Maak een keuze',
  openOnFocus: true,
  items: [''],
  score: function(search) {
    var score = this.getScoreFunction(search);
    return function(item) {
      return item.text
        .toLowerCase()
        .startsWith(search.toLowerCase()) ? 1 : 0;
    };
  },
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js">
</script>

<select class="select" selected="">
  <option>Arm</option>
  <option>Armoede</option>
  <option>Armband</option>
  <option>Edeldarm</option>
  <option>Warmbloedig</option>
  <option>Opgewarmd</option>
</select>
...