開発中、セレクトボックスのリスト内の件数が100件を超えてしまい、目で探すには非常に大変になってしまいました。
そこで、セレクトボックス内を検索できるプラグインはないものかと探してみたところ、便利なjQueryプラグインを見つけましたのでご紹介します。

Select2

このプラグインの便利な点としては、この辺りかと思います。
①実装が簡単
②カスタマイズが比較的容易
③イベントにも対応

また以前私が書いた「非同期通信(Ajax)を使わず、セレクトボックスのリストを動的に変更する」という記事があるのですが、この記事のようにリストの中身が動的に変わっても、うまく組み合わせることが可能でした。
https://bsblog.casareal.co.jp/archives/2785

公式のURLはこちらです。
https://select2.org

実践

実際に書いてみましょう。

<select name="fruits" id="select">
  <option value="1">いちご</option>
  <option value="2">りんご</option>
  <option value="3">ばなな</option>
</select>

<script>
$('#select').select2();
</script>

これだけです。
これだけでセレクトボックス内検索が実現できてしまいます。

次にチェンジイベントの書き方です。

<select name="fruits" id="select">
  <option value="1">いちご</option>
  <option value="2">りんご</option>
  <option value="3">ばなな</option>
</select>

<script>
$('#select').select2();

$('#select').change('select2:select', function () {
  console.log('フルーツが変更されました。');
});
</script>

これだけです。
これといって特に難しいことをする必要はありませんでした。

まとめ

今回は、使ってみてとても便利なプラグインを紹介しました。

本当にお手軽に使えるプラグインなので、セレクトボックス内を検索したかったらこのプラグインを入れておけばいいと思います。

紹介した使用方法は一部ですので、詳しくは公式サイトなどで調べてみてください。

Tweet

Check