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

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のマッチング処理を自由にカスマイズ出来ます。

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次