セレクトメニューにサジェスト機能をつける方法(select2)
2024/05/25
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェスト機能をつけたいというケースがあった。調べてみたところselect2というjQueryプラグインで実装できる模様。以下にサンプルと対応方法をメモ。
公式サイト
サンプル
https://taitan916.info/sample/select2/
jQueryと外部ファイル呼び出し
<script src="//code.jquery.com/jquery-3.5.1.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
ソース
<select name="test" id="test" style="width: 150px;"> <option value="ブルーベリー">ブルーベリー</option> <option value="ブドウ">ブドウ</option> <option value="プルーン">プルーン</option> </select> <script> $(function(){ $("#test").select2(); }); </script>
所感
簡単に実装できる上に見た目も多少オシャレにしてくれるで非常に便利なプラグインだと思った。またスマホでも対応している模様。
セレクトメニューの選択肢が多い場合に選ぶのが大変なので、そういった際に使えそう。
関連記事
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
FullCalendarでラベルごとに表示・非表示を切り替える方法
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jQuery Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...