JavaScript

【JavaScript】Select2の検索方式を前方一致に変更する方法(コピペOK)

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

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

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

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

スポンサーリンク

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

まずは、簡単にSelect2の説明をしておきますね。

もうSelect2を使っていてそんな説明いらん!って人はここは読み飛ばして下さい。

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

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

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

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

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

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

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

まずソースコードから!

このソースコードをコピペして、optionを書き換えるだけでも使えると思いますので、良かったらお使い下さい!

サンプルソースの説明

サンプルソースの説明をしておきましょう。

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

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

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

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

まとめ

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

自由度高くて良いですよね!

これなら検索方式の変更は柔軟に対応出来るので心配いりませんね。

それにしてもJavaScriptのライブラリって本当に使いやすいですな。
導入も簡単ですし!

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

スポンサーリンク


-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

フォスターフリーランス
プロフィール

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