タグの選択に使える絞り込み入力ができるセレクトボックス－jquery-searchbox（プラグイン）

作成した背景

ユーザーが投稿するフォームで会場を選択するためのセレクトボックスが必要だったのですが選択肢となる会場の種類が非常に多くセレクトボックスから選択させるのはユーザービリティが悪いということになった。

会場名を選択させる為の検索絞り込み画面を別途作成するという案もありましたが、工数が増える懸念や別画面を挟むのもまたユーザービリティの低下につながる懸念もあるこのUIを選定しました。

デモ

セレクトボックスを選択するとテキストボックスのように文字を入力する事が可能となっていて、文字を入力するとセレクトボックスが自動で絞り込みされます。
オプションを指定すると、選択ボックスに存在しない値を入力することも可能でブログなどのハッシュタグ追加としても利用できます。

こちらにデモページを用意しているのでご利用ください。

使い方

jQueryでセレクトボックスを指定してsearchBoxを呼び出すと検索機能付きのセレクトボックスになります。以下の例はオプションでセレクトボックスの表示幅を指定しています。また、”mode :2″ を渡すと任意の文字を設定することが出来るのでタグの追加などにも利用が可能となっています。

javascript

<script src="https://demo.isystk.com/jquery-searchbox/js/jquery-searchbox.js"></script>
<script type="text/javascript">
$(function() {
$('<セレクトボックスのセレクタ>').searchBox({elementWidth: '250', mode: 1});
});
</script>

css

.searchBoxElement{
  background-color: white;
  border: 1px solid #aaa;
  position: absolute;
  max-height: 114px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  line-height: 23px;
  list-style: none;
  z-index: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.searchBoxElement span{
  padding: 0 5px;
}
.searchBoxElement::-webkit-scrollbar {
  display:none;
}
.searchBoxElement li{
	background-color: white;
	color: black;
}
.searchBoxElement li:hover{
	background-color: #50a0ff;
	color: white;
}
.searchBoxElement li.selected{
	background-color: #50a0ff;
	color: white;
}

ソースコード

ソースコードはGitHubにて公開中です。気に入ったからは下のSNSボタンで”いいね”お願いシャス！

https://github.com/isystk/jquery-searchbox