Select2 type to select

Question

Я пытаюсь использовать select2, чтобы иметь раскрывающийся список с несколькими выборами, но что-то не так.

Обычно, когда вы вводите опцию, она подсвечивается так, что вы можете нажать enter и выбрать ее. Он подчеркивает опцию, но не выделяет ее, поэтому, если я наберу «алабаму», но нажмите enter, она выберет «арканзас».

Я использую последнюю версию (3.5.1)

HTML

<label class="control-label" for="states">States:</label> 
<input id="states" name="states" /> 
<input class="btn btn-primary" type="submit" value="Submit Search" /> 

JavaScript:

$("#states").select2({ 
    width: 'resolve', 
    maximumSelectionSize: 5, 
    ajax: { 
     dataType:"json", 
     url:"getStates.cfm", 
     results: function(data) { 
      return {results:data}; 
     } 
    }, 
    multiple:true 
}); 

Я отсутствует какой-то параметр? Я мог бы поклясться, что это нормально срабатывало в последний раз, когда я его использовал. Нет ошибок консоли, и он щелкает, выбирает отлично.

Обратите внимание, что github страница работает точно так же, как я хочу (при вводе, он выбирает первый вариант, который соответствует)

Answer 1

В Select2 3.x, выделенный результат в выпадающем списке всегда будет первым результат во время поиска. Это будет изменяться в Select2 4.x, поэтому выбранная опция будет выбрана, если она присутствует.

Вы ищете результаты для сортировки по-разному. По умолчанию Select2 заказывает опции по порядку, который у них есть в DOM, а не по их релевантности. Документация provides an example о том, как настроить сортировку результатов с помощью опции sortResults.

Помните, что при использовании AJAX более эффективно сортировать результаты на стороне сервера, поэтому Select2 больше не сортирует. Это объясняет, почему «Арканзас» возвращается при поиске «Алабамы».

Answer 2

У меня была та же проблема. И решение было найдено, когда я обнаружил, что каждый раз, когда я набираю текст в поле поиска, каждый раз он вызывает функцию query. Вот и все. Таким образом, все, что мне нужно было выполнять, заполнять результаты, только если оно соответствует хотя бы одному символу в любом тексте доступных параметров. Следующий способ:

query : function(opts){ 
    var res = []; 
    var fulloptions = ArrayFoundUponYourAjaxOrAnyStaticOptions; 
    var stripDiacritics = Select2.util.stripDiacritics; 
    for(var z=0,len=fulloptions.length;z<len;z++){ 
    if(stripDiacritics(fulloptions[z].text.toUpperCase()). 
     indexOf(stripDiacritics(opts.term.toUpperCase())) >= 0){ 
     res.push(fulloptions[z]); 
    } 
    } 
    opts.callback({ results : res }); // res is your filtered/matching rows out of which first one will get auto hightlighted 
}