7

使用 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>"
  }
});

但这很老套，而且不可点击。

4

7 回答 7

9

为了补充@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);
},

最后，当除了“Other”结果（最初总是在结果集中）有任何结果时，我们需要从结果集中删除“Other”选项：

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

演示

于 2013-07-30T22:23:17.723 回答
1

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

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

（这是在coffeescript 中。）唯一的问题是任何搜索都会弹出“Other”——但这可以通过修改sortResults函数轻松解决。

于 2013-07-30T17:55:21.267 回答
1

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

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

于 2020-01-21T06:35:29.733 回答
0

在stackoverflow上试试这个答案

createSearchChoice: function (term) {
  return { id: term, text: term };
}
于 2013-11-08T16:32:57.073 回答
0

在 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>
于 2019-03-21T13:12:26.963 回答
0

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

$("select").select2({ 
formatNoMatches   :    function(term) {       
    return   "Other";
}
});
于 2015-09-07T12:46:43.260 回答
0

试试看，这项工作在较新的版本（ Select2 4.0.3 ）中无需添加新变量。

>>>>这里拉小提琴<<<<

首先，您需要下载 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"
            };
        }
});

希望这项工作。

于 2017-01-18T05:28:37.677 回答