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+使用different default matcher而不是文档中当前显示的那个，这个新的stripDiacritics函数调用a以便{{1}例如，匹配á。因此，我将应用页面中包含的Select2版本附带的默认matcher，以将其默认匹配算法应用于任何不是“其他”选项的选项：

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;
}

Demo

Answer 2

我通过更改匹配器来解决它。

$('#activity_log_industry_name').select2
  matcher: (term, text) ->
    if text=="Other"
      return true
    text.toUpperCase().indexOf(term.toUpperCase())>=0

（这是在coffeescript。）唯一的问题是＆＃34;其他＆＃34;将弹出任何搜索 - 但这可以通过修改sortResults函数轻松解决。

Answer 3

要自定义formatNoMatches，请在您的视图中使用以下代码

ui-select2="{formatNoMatches:'No Results Found'}"

Answer 4

在stackoverflow

上尝试此答案

createSearchChoice: function (term) {
  return { id: term, text: term };
}

Answer 5

使用以下代码在未找到匹配项时将消息显示为“其他”

$("select").select2({ 
formatNoMatches   :    function(term) {       
    return   "Other";
}
});

Answer 6

尝试一下，这项工作在较新的版本（Select2 4.0.3）没有添加新变量。

<强> >>>> Fiddle here <<<<

首先您需要下载javascript名称“ github/alasql ” 搜索数据中的查询

<select id="something">
  ...
  <option value="other">Other</option> <!-- or put this in "dataItemsList" for dynamic option -->
</select>

然后在你的javascript中

// other than this array we will give "other" option
var ajax_search_array = ['your', 'item', 'for', 'search'];

$("#something").select2({
   placeholder: "Choose your something",
   //data: dataItemsList, //your dataItemsList for dynamic option
   //...
   //...
   tags: true,
   createTag: function (tag) {
        // here we add %search% to search like in mysql
        var name_search  = "%"+tag.term.toString().toLowerCase()+"%";

        // alasql search
        var result = alasql('SELECT COLUMN * FROM [?] WHERE [0] LIKE ?',[ajax_search_array, name_search]);

        // if no result found then show "other"
        // and prevent other to appear when type "other"
        if(result==false && tag.term != "other"){
            return {
               id: "other",
               text: "Other"
            };
        }
});

希望这项工作。

Answer 7

在Select2的4+版本中，匹配器应按以下方式传递：

$("something").select2({
    matcher: function(params, data) {
        if (data.id === "0") { // <-- option value of "Other", always appears in results
            return data;
        } else {
            return $.fn.select2.defaults.defaults.matcher.apply(this, arguments);
        }
    },
});

“其他”选项应添加到选项列表中，如下所示：

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

选择2，当没有选项匹配时，应出现“其他”

7 个答案:

Demo