Force selectize.js только для отображения параметров, начинающихся с пользовательского ввода

Wilbert Heeringa спросил: 31 июля 2018 в 09:47 в: javascript

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

Здесь показаны не только слова, начинающиеся с "руки", но также слова (или параметры), которые содержат "руку" в качестве подстроки где-то еще.

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

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

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


1 ответ

Есть решение
Roy Scheffers ответил: 31 июля 2018 в 03:41

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

Функция Score вызывается каждый раз, когда вводится новый символ. Внутренняя функция 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>
Wilbert Heeringa ответил: 03 августа 2018 в 10:52
Работает хорошо. Я хотел бы знать, как интегрировать это в приложение Shiny. См. Также stackoverflow.com/questions/52039435/…