セレクトメニューにサジェスト機能をつける方法(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>
所感
簡単に実装できる上に見た目も多少オシャレにしてくれるで非常に便利なプラグインだと思った。またスマホでも対応している模様。
セレクトメニューの選択肢が多い場合に選ぶのが大変なので、そういった際に使えそう。
関連記事
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...