Site icon Tips Note by TAM

【jQuery】multiple対応のselectbox絞り込みプラグインを作りました

キーワードによるselectboxのoptionの絞り込みをしたくて
色々とjQueryのプラグインを探していたのですが、思うようなものが見つからなかったので
シンプルなプラグインを作ってみました。

やりたかったことは、こちらの「Searchable」の例や、BootstrapベースのSelect2の例と似ているのですが
selectboxの見た目や操作はそのままで、シンプルにoptionの絞り込み機能のみのプラグインを作成しました。

 

サンプル1 プルダウン

サンプル2 multiple

サンプル3 やりたかったこと

 

使い方

  • jQueryを読み込みます(※v1.8以上)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  • selectboxsearchプラグインファイルを読み込みます
<script type="text/javascript" src="jquery.selectboxsearch.js"></script>
  • プラグインを呼び出します
$('#element').selectboxsearch('#target');

 
ダウンロード

https://github.com/tam-yamaguchi/jquery-selectboxsearch

 
備考

プラグインのテンプレートとして、jQuery Boilerplateを利用しています。