勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

セレクトメニューにサジェスト機能をつける方法(select2)

   2024/05/25  jQuery JavaScript

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェスト機能をつけたいというケースがあった。調べてみたところselect2というjQueryプラグインで実装できる模様。以下にサンプルと対応方法をメモ。

 

公式サイト

https://select2.org/

 

サンプル

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 JavaScript

  関連記事

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...