javascript Select2，当没有选项匹配时，应该出现“other”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17950117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2, when no option matches, "other" should appear
提问by varatis
With select2 dropdown, how do I get a default option to appear if no options match the user's typed input?
使用 select2 下拉菜单，如果没有选项与用户键入的输入相匹配，我如何让默认选项出现？
$("something").select2({
formatNoMatches: function(term) {
//return a search choice
}
});
I haven't been able to find anything that really matches this desired functionality within the select2 documentation or Stack Overflow.
我一直无法在 select2 文档或 Stack Overflow 中找到与此所需功能真正匹配的任何内容。
EditI'm getting closer with this
编辑我越来越接近这个
$("something").select2({
formatNoMatches: function(term) {
return "<div class='select2-result-label'><span class='select2-match'></span>Other</div>"
}
});
But this is pretty hacky off the bat, and also isn't clickable.
但这很容易上当，而且也无法点击。
回答by Fabrício Matté
To complement on @vararis's answer:
补充@vararis的回答：
Select2 attached to a <select>element does not allow for custom createSearchChoicenor queryfunctions, hence we will need to manually add an option element (I'll add it as the last option of the element so we can easily .popit out of the results set):
附加到<select>元素的Select2不允许自定义createSearchChoice或query函数，因此我们需要手动添加一个选项元素（我将它添加为元素的最后一个选项，以便我们可以轻松地将.pop其从结果集中删除）：
<select>
...
<option value="0">Other</option>
</select>
Then pass a custom matcherfunction so that this "Other" option is always matched.
然后传递一个自定义matcher函数，以便始终匹配此“其他”选项。
NOTE:Select2 3.4+ uses a different default matcherthan the one currently shown in the documentation, this new one has a call to the stripDiacriticsfunction so that amatches áfor instance. Therefore I'll apply the default matcherthat comes with the Select2 version included in the page to apply its default matching algorithm to any option that's not the "Other" option:
注意：Select2 3.4+ 使用的默认匹配器与文档中当前显示的匹配器不同，这个新匹配器调用了该stripDiacritics函数，以便进行a匹配á。因此，我将应用matcher页面中包含的 Select2 版本附带的默认值，以将其默认匹配算法应用于任何不是“其他”选项的选项：
matcher: function(term, text) {
return text==='Other' || $.fn.select2.defaults.matcher.apply(this, arguments);
},
Finally, we need to remove the "Other" option from the results set when there's any result besides the "Other" result (which is initially always in the results set):
最后，当除了“Other”结果（最初总是在结果集中）之外还有任何结果时，我们需要从结果集中删除“Other”选项：
sortResults: function(results) {
if (results.length > 1) results.pop();
return results;
}
Demo
演示
回答by varatis
I solved it by changing the matcher.
我通过更改匹配器解决了它。
$('#activity_log_industry_name').select2
matcher: (term, text) ->
if text=="Other"
return true
text.toUpperCase().indexOf(term.toUpperCase())>=0
(this is in coffeescript.) The only problem is that "Other" will pop up for any search -- but this can be easily solved by modifying the sortResultsfunction.
（这是在coffeescript中。）唯一的问题是任何搜索都会弹出“其他”——但这可以通过修改sortResults函数轻松解决。
回答by Nikitha nikitha
To customize formatNoMatches use following code in your view
要自定义 formatNoMatches，请在您的视图中使用以下代码
ui-select2="{formatNoMatches:'No Results Found'}"
ui-select2="{formatNoMatches:'No Results Found'}"
回答by Adrian P.
Try this answer on stackoverflow
在stackoverflow上试试这个答案
createSearchChoice: function (term) {
return { id: term, text: term };
}
回答by Imamudin Naseem
Use following code to display the message as 'Other' when no matches found
未找到匹配项时，使用以下代码将消息显示为“其他”
$("select").select2({
formatNoMatches : function(term) {
return "Other";
}
});
回答by Anthony Kal
try it, this work in newer version ( Select2 4.0.3 ) without add a new variable.
试试吧，这项工作在较新的版本（ Select2 4.0.3 ）中没有添加新变量。
first you need to download javascript name "github/alasql" to search like query in data
首先你需要下载javascript名称“ github/alasql”来搜索数据中的查询
<select id="something">
...
<option value="other">Other</option> <!-- or put this in "dataItemsList" for dynamic option -->
</select>
then in your javascript
然后在你的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"
};
}
});
hope this work.
希望这项工作。
回答by marcovtwout
In version 4+ of Select2, the matcher should be passed like this:
在 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);
}
},
});
the "Other" option should be appended to the option list like this:
“其他”选项应该像这样附加到选项列表中：
<select>
...
<option value="0">Other</option>
</select>
