jQuery 选择2个搜索选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24021276/
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 search options
提问by dawriter
I downloaded Select2 jquery plug in and have it all set up - I have a basic dropdown here.
我下载了 Select2 jquery 插件并进行了所有设置 - 我在这里有一个基本的下拉列表。
<SELECT NAME="GENDER">
<OPTION VALUE="1">MALE
<OPTION VALUE="2">FEMALE
<OPTION VALUE="3">UNDEFINED
</SELECT>
I applied the plug in and it works - not a problem.
我应用了插件，它可以工作 - 没问题。
I've been reviewing the select2 documentation and what I'm trying to do is instead of searching by gender such as typing Female and Male, etc - I want the user to simply press 1 thus it brings up Male, 2 for Female.
我一直在查看 select2 文档，我想要做的是而不是按性别搜索，例如输入女性和男性等 - 我希望用户只需按 1 即可显示男性，2 代表女性。
Has anyone attempted this in select2?
有没有人在 select2 中尝试过这个？
回答by Matt
Have a look at the "matcher" option in the documentation: http://ivaynberg.github.io/select2/#documentation
查看文档中的“匹配器”选项：http: //ivaynberg.github.io/select2/#documentation
Override the matcher function to check against both the text() and the val() of the given option. Untested example:
覆盖匹配器函数以检查给定选项的 text() 和 val()。未经测试的示例：
$('select').select2({
matcher: function(term, text, option) {
return text.toUpperCase().indexOf(term.toUpperCase())>=0 || option.val().toUpperCase().indexOf(term.toUpperCase())>=0;
}
});
回答by Tessa
The parameters for the "matcher" option has changed since this has been answered. I came across this same issue when implementing a US State dropdown and each option was like <option value="PA">Pennsylvania</option>and I wanted users to be able to either spell the state or simply type their code and it'd work. Based on the updated documentation, I modified it like this:
“匹配器”选项的参数已更改，因为已回答此问题。我在实现美国州下拉菜单时遇到了同样的问题，每个选项都像<option value="PA">Pennsylvania</option>，我希望用户能够拼写州或简单地输入他们的代码并且它会起作用。根据更新后的文档，我将其修改如下：
$('select').select2({
matcher: function(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') { return data; }
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') { return null; }
// `params.term` is the user's search term
// `data.id` should be checked against
// `data.text` should be checked against
var q = params.term.toLowerCase();
if (data.text.toLowerCase().indexOf(q) > -1 || data.id.toLowerCase().indexOf(q) > -1) {
return $.extend({}, data, true);
}
// Return `null` if the term should not be displayed
return null;
}
});
Here is a working CodePen demo I whipped upthat demonstrates this using both the OP's select field and a select field of the U.S. states.
这是我制作的一个有效的 CodePen 演示，它使用 OP 的选择字段和美国各州的选择字段演示了这一点。
回答by jhilden
I took @Tessa's great answer above and made it work with optGroup.
我在上面采纳了@Tessa 的精彩回答，并使其与optGroup.
function(params, option) {
// If there are no search terms, return all of the option
var searchTerm = $.trim(params.term);
if (searchTerm === '') { return option; }
// Do not display the item if there is no 'text' property
if (typeof option.text === 'undefined') { return null; }
var searchTermLower = searchTerm.toLowerCase(); // `params.term` is the user's search term
// `option.id` should be checked against
// `option.text` should be checked against
var searchFunction = function(thisOption, searchTerm) {
return thisOption.text.toLowerCase().indexOf(searchTerm) > -1 ||
(thisOption.id && thisOption.id.toLowerCase().indexOf(searchTerm) > -1);
};
if (!option.children) {
//we only need to check this option
return searchFunction(option, searchTermLower) ? option : null;
}
//need to search all the children
option.children = option
.children
.filter(function (childOption) {
return searchFunction(childOption, searchTermLower);
});
return option;
}
