セレクトメニューにサジェスト機能をつける方法(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>
所感
簡単に実装できる上に見た目も多少オシャレにしてくれるで非常に便利なプラグインだと思った。またスマホでも対応している模様。
セレクトメニューの選択肢が多い場合に選ぶのが大変なので、そういった際に使えそう。
関連記事
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
-
オリジナルのjQueryプラグインを作成する方法
オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...