web-dev-qa-db-ja.com

Select2検索オプション

Select2 jqueryプラグインをダウンロードして、すべてセットアップしました。ここに基本的なドロップダウンがあります。

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

プラグインを適用しましたが、機能します-問題ありません。

Select2のドキュメントを確認してきましたが、女性や男性などと入力するなど、性別で検索するのではなく、ユーザーに1を押すだけで、男性、女性の場合は2が表示されます。

Select2でこれを試みた人はいますか？

jquerypluginsjquery-select2
11
dawriter

ドキュメントの「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;
  }
});
21
Matt

「マッチャー」オプションのパラメーターは、これが回答されてから変更されました 。米国の州のドロップダウンを実装するときに同じ問題が発生しました。各オプションは<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の選択フィールドと米国の州の選択フィールドの両方を使用してこれを示しています。

6
Tessa

上記の@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;
}
0
jhilden