选择2,当没有选项匹配时,应出现"其他"

Question

使用select2下拉列表,如果没有选项与用户输入的输入相匹配,如何显示默认选项？

$("something").select2({
  formatNoMatches: function(term) {
    //return a search choice
  }
});

我无法在select2文档或Stack Overflow中找到任何与所需功能相匹配的内容.

编辑 我越来越接近这个

$("something").select2({
  formatNoMatches: function(term) {
    return "<div class='select2-result-label'><span class='select2-match'></span>Other</div>"
  }
});

但这很糟糕,而且也无法点击.

Answer 1

补充@ vararis的答案:

附加到<select>元素的Select2 不允许自定义createSearchChoice或query函数,因此我们需要手动添加一个选项元素(我将它添加为元素的最后一个选项,以便我们可以轻松地将.pop其从结果集中删除):

<select>
  ...
  <option value="0">Other</option>
</select>

然后传递自定义matcher函数,以便始终匹配此"其他"选项.

注意: Select2 3.4+使用与文档中当前显示的匹配器不同的默认匹配器,这个新的匹配器调用该stripDiacritics函数以便a匹配á.因此,我将应用matcher页面中包含的Select2版本附带的默认值,将其默认匹配算法应用于任何不是"其他"选项的选项:

matcher: function(term, text) {
  return text==='Other' || $.fn.select2.defaults.matcher.apply(this, arguments);
},

最后,除了"其他"结果(最初总是在结果集中)之外的任何结果时,我们需要从结果集中删除"其他"选项:

sortResults: function(results) {
  if (results.length > 1) results.pop();
  return results;
}

演示