JavaScript

【JavaScript】Select2ライブラリの検索方式を前方一致に変更する方法【コピペで対応】

投稿日:2018年11月20日 更新日:

JavaScriptのライブラリのSelect2前方一致検索させる方法についての説明です。

Select2はデフォルトでは部分一致検索されるのですが、それを前方一致にする方法になります。

コピペで簡単に対応出来るようにしましたので、ご参考にどうぞ!

スポンサーリンク

Select2はプルダウンを拡張するJavaScriptライブラリ

簡単にSelect2の説明をしておきます。

もうSelect2を使っている人はここは読み飛ばして下さい。

Select2は、プルダウンを拡張するJavaScriptライブラリです。
このライブラリを入れると、プルダウンの項目を検索かけれるようになります。

公式サイトからダウンロードできます。

導入方法はQiitaの【JavaScript】Select2でプルダウンをおしゃれにする【ライブラリ】が参考になります。

同じようなライブラリにChosenというライブラリもあります。

Select2の検索方式を前方一致に変更する方法

本題のSelect2の検索方式を前方一致にする方法の説明です。

サンプルソース(コピペ利用可能)

まずソースコードから。

<script>
    $(function() {

        $(".select2").select2({
            matcher: function(params, data) {
                return matchStart(params, data);
            },
        });
    })

    function matchStart(params, data) {
        params.term = params.term || '';
        if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
            return data;
        }
        return false;
    }


</script>

<select class="select2">
    <option value=""></option>
    <option value="スズキ">スズキ</option>
    <option value="ヒラスズキ">ヒラスズキ</option>
    <option value="タイリクスズキ">タイリクスズキ</option>
</select>

このソースコードをコピペして、optionを書き換えるだけでも使えます。

サンプルソースの説明

サンプルソースの説明です。

Select2を指定したタグに適応するファンクションのselect2()には、いろいろなオプションを指定できます。
オプションの中にmatcherがあり、このmatcherに自作のファンクションを指定するとマッチング処理をカスタマイズ出来ます。

今回は前方一致させたいので、matchStartという自作のファンクションに前方一致検索処理を実装して指定しています。

matcherのカスタマイズ方法は、本家でも説明されています。

本家:マッチャーカスタマイズ方法

まとめ:select2は自由にmatcherをカスタマイズ出来る

この方法でSelect2のマッチング処理を自由にカスマイズ出来ます。

自由度高くて良いですね。
これなら検索方式の変更は柔軟に対応出来るので、仕様変更にも柔軟に対応できます。

最後までお読み頂きありがとうございました!

スポンサーリンク


-JavaScript

執筆者:

関連記事

【jQuery】Remodalの使い方とサンプル

jQueryのモーダルウインドウライブラリRemodalの使い方について。 簡単に導入できるようにサンプルも掲載しました。 スポンサーリンク 目次RemodalのダウンロードモーダルウインドウのHTM …

プロフィール

このサイトを運営しているDENです。
アングラーのフリープログラマー。 主にプログラミングと釣の話を発信しています。
プログラミングで自由になり思う存分に釣りをしまくる生活実践中。
詳しいプロフィールはこちら 
フォスターフリーランス