Demo
入力式セレクトボックス
使い方
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;
}