选择2类型

Question

我正在尝试使用select2来获得状态的多选下拉列表，但是出了点问题。

通常情况下，当您输入一个选项时，它会突出显示，以便您可以按Enter键并选择它。它强调了选项，但没有突出显示它，所以如果我输入“alabama”但输入，它将选择“arkansas”。

我正在使用最新版本（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中的顺序排序选项，而不是它们的相关程度。有关如何使用sortResults选项自定义结果排序的文档provides an example。

请记住，在使用AJAX时对服务器端的结果进行排序会更有效，这就是Select2不进行任何进一步排序的原因。这可以解释为什么＆＃34;阿肯色州＆＃34;正在搜索＆＃34; Alabama＆＃34;。

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
}