Блог

Главная - Вопросы по программированию - Фильтр Select2 с отдельными строками

Фильтр Select2 с отдельными строками

#jquery #jquery-select2 #jquery-select2-4

Вопрос:

Не могу найти здесь ничего или https://select2.org/

Можно ли с помощью select2 фильтровать результаты с помощью отдельных строк?

Пример:

Опции

  • Марка телефона 128 ГБ Серебристый
  • Марка телефона 256 ГБ Черный
  • Марка телефона 256 ГБ Черный
  • Марка телефона 128 ГБ Красный
  • Марка телефона 256 ГБ Белого Цвета

Отфильтруйте по бренду телефона A и верните

  • Марка телефона 128 ГБ Серебристый
  • Марка телефона 256 ГБ Черный
  • Марка телефона 256 ГБ Белого Цвета

Это не привело к каким-либо результатам, поскольку строка не соответствовала марке телефона 128 ГБ A.

Отредактировано: это не обязательно должно быть чувствительно к регистру.

Ответ №1:

Используйте функцию сопоставления и разделите строку поиска:

 $(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            terms=(params.term).split(" ");

            for (var i = 0; i < terms.length; i  ) {
                if (((data.text).toUpperCase()).indexOf((terms[i]).toUpperCase()) == -1) 
                return null;
            }
            return data;
        }
    });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

Если вы хотите, чтобы он учитывал регистр, просто удалите .toUpperCase() 

 $(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            terms=(params.term).split(" ");

            for (var i = 0; i < terms.length; i  ) {
                if (((data.text)).indexOf((terms[i])) == -1) 
                return null;
            }
            return data;
        }
    });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

Редактировать:

Строгий поиск слов:

 $(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            text=data.text.toUpperCase().split(" ");
            terms=params.term.toUpperCase().split(" ").clean('');
            count=terms.length;
            terms.forEach(function(trm){
              text.forEach(function(txt){
                if (txt==trm)count--;
              });
            })
            return !count?data:null;
            
        }
    });
});

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i  ) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
}; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

Комментарии:

1. Спасибо за ответ, ваш первый ответ не фильтруется ни по «Марке телефона А», ни по «марке телефона а». Тем не менее, ваш второй-с «Телефоном марки А», и это то, что я хочу, чтобы он делал, за исключением случаев, когда он не учитывает регистр. Вы очень близки, и я сначала не совсем понял, как использовать сопоставитель, так что это очень помогает.

2. Это потому, что при поиске «Марка телефона A» без учета регистра «A» совпадает с Br a nd и Bl a ck, если только вы не хотите, чтобы слово было очень строгим.

3. Отредактировано и добавлен строгий поиск слов. Вы можете выполнить поиск «Марка телефона A», «марка телефона a» или в беспорядке, например «Марка телефона». Но если вы поставите «Отруби» вместо «Бренд», никаких результатов не будет.

4. Я понял это после своего комментария. Все три являются хорошими примерами для использования в случае необходимости.

Метки: