选择2个搜索选项

Question

我下载了Select2 jquery插件并完成了所有设置 - 我在这里有一个基本的下拉菜单.

<SELECT NAME="GENDER">  
 <OPTION VALUE="1">MALE
 <OPTION VALUE="2">FEMALE  
 <OPTION VALUE="3">UNDEFINED
</SELECT>

我应用插件,它的工作原理 - 不是问题.

我一直在审查select2文档,而我正在尝试做的不是按性别搜索,例如输入女性和男性等等 - 我希望用户只需按1即可调出男性,女性为2.

有没有人在select2中尝试过这个？

Answer 1

查看文档中的"matcher"选项:http://ivaynberg.github.io/select2/#documentation

覆盖匹配器函数以检查给定选项的text()和val().未经测试的例子:

$('select').select2({
  matcher: function(term, text, option) {
    return text.toUpperCase().indexOf(term.toUpperCase())>=0 || option.val().toUpperCase().indexOf(term.toUpperCase())>=0;
  }
});

Answer 2

因为已经回答了，所以“ matcher”选项的参数已更改。在实现“美国州”下拉菜单时，我遇到了同样的问题，每个选项都非常相似<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;
    }
});

这是我摘录的一个有效的CodePen演示，它使用OP的选择字段和美国各州的选择字段对此进行了演示。