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

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

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

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

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

簡単にSelect2の説明をしておきます。
説明不要の方は次の見出しまで読み飛ばしてください。

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

導入方法は下記の記事がわかりやすいです。

Qiita

【JavaScript】Select2でプルダウンをおしゃれにする【ライブラリ】 - Qiita selectのプルダウンを、ちょっとおしゃれで便利にしてしまうJavaScriptのライブラリ「Select2」の紹介です。 本家：Select2 - The jQuery replacement for select boxes ....

ちなみに同じようなライブラリに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のマッチング処理を自由にカスマイズできます。

この記事が参考なれば幸いです。

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