Как отфильтровать теги опций из оригинала select с помощью Select2?

Question

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

В основном, это:

<select id="select"> 
    <option class="car">Car 1</option> 
    <option class="plane">Plane 1</option> 
</select> 

$("#select").select2(); 

... необходимо создать фальшивку выбрать только опционные тег с классом car.

Answer 1

Похоже, что ОП нашел ответ на https://github.com/select2/select2/issues/1048.

Ответ должен предоставить функцию matcher.

$("#select").select2({ 
    matcher: function(term, text, option) { 
     return option.hasClass('car'); 
    } 
}); 

jsfiddle

Answer 2

Вы должны использовать свойство «disabled» этого параметра. Если вы хотите отфильтровать его, установите его «отключено». Это выделяется в select2. Кроме того, вы можете использовать класс CSS, чтобы скрыть его, а не серого.

Answer 3

Просто держать этот вопрос уточненный .. Предложенный ответ с использованием подачи функции matcher устарела. Поскольку Выбор2 4.0.0 вам нужно use a wrapper с matcher:

function matchStart (term, text) { 
    if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { 
    return true; 
    } 

    return false; 
} 

$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { 
    $(".js-example-matcher-start").select2({ 
    matcher: oldMatcher(matchStart) 
    }) 
}); 

Для меня это не сработало. Я не знаю почему. Но я нашел для этого обход. По-видимому, с помощью Select2 вы также можете предоставить функцию формата для метода .select2() для каждого option или элемента в списке. Например, если вы хотите добавить каждый элемент с помощью значка или чего-то подобного. Оказывается, что элемент не будет отображаться в выпадающем списке, если вы возвращаетесь null в формате функции, например:

function formatState(state) { 
      if (!state.id) { return state.text; } 
      if (state.disabled) { return null; } 
      var $state = $('<span>'.concat(state.text).concat("</span>")); 
      return $state; 
     } 

$('#myDropdown').select2({ 
     templateResult: formatState 
}); 

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

Answer 4

Я боролся с проблемой в течение некоторого времени и разместил свой собственный аналогичный question. Проблема с решением сопряжения, приведенная выше, заключается в том, что совпадение используется для соответствия поиску, а просто открытие раскрывающегося списка будет просто соответствовать всему списку и, следовательно, отображать все, что не совсем удовлетворительно.

После начальной ошибки solution я, наконец, прибегал к «разрушению select2 и восстановлению его после фильтрации выбора». Вот решение вопроса, используя этот подход,

//assuming you are usign jquery... 
//keep a non-filtered copy of the original select 
var $clonedSelect = $('select#select').clone(); 
$.fn.filterSelect2 = function(class=''){ 
    if($(this).is('select')){ 
    $(this).select2('destroy'); 
    $(this).empty(); 
    $(this).append($('option.'+class, $clonedSelect).clone()); 
    $(this).select2(); 
    } 
    return $(this); 
} 
$('select#select').filterSelect2('car'); //will create a select2 with only the car class options. 

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