セレクトメニューにサジェスト機能をつける(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェスト機能をつけたいというケースがあった。select2というjQueryプラグインで実装できたので対応方法をメモ。
サンプル
https://taitan916.info/sample/select2/
jQueryと外部ファイル呼び出し
|
1 2 3 |
<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> |
ソース
|
1 2 3 4 5 6 7 8 9 10 11 |
<select name="test" id="test" style="width: 150px;"> <option value="ブルーベリー">ブルーベリー</option> <option value="ブドウ">ブドウ</option> <option value="プルーン">プルーン</option> </select> <script> $(function(){ $("#test").select2(); }); </script> |
リファレンス
所感
簡単に実装できる上に見た目も多少オシャレにしてくれるで非常に便利なプラグインだと思った。またスマホでも対応している模様。
セレクトメニューの選択肢が多い場合に選ぶのが大変なので、そういった際に使えそう。
関連記事
-
-
javascriptでブラウザ判別&ページ遷移
var userAgent = window.navigator.userAge ...
-
-
jQueryでIPから位置情報の取得
jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...
-
-
javascriptの文末
下記みたいなコードがあって、文末に｢;｣が 無いのになんで動くのこれ？ となった ...
-
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...
-
-
FullCalendarでラベル毎に表示切替したい
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
画像をサムネイル⇔クリックで拡大(lightbox)
画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...
-
-
JavaScriptでcookieの保存
JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...
- PREV
- Chart.jsでグラフの描写
- NEXT
- Chart.jsで横スクロール可能なグラフを表示