階層的なドロップダウン(セレクトメニュー)を実装できるjQueryプラグイン「Hierarchy Select」のご紹介です。
Bootstrapを併用しているので見た目も良いです。
Live Hierarchyによって、インプットBOXに入れた文字と一致する文字を検索できます。
html5の<datalist>のような、入力補助の機能が導入されています。
Google検索のサジェスト検索のようなことが出来ます。
使われる用途として、ECサイトなどのヘッダーにある検索枠で、
ブランド名や、カテゴリなど、検索されやすいワードをストックしておき、
サジェスト機能付きっぽい検索窓を付けたいときに、
簡単に実装できると思います。
目次
動作の確認ページ
動作の確認ページ(本家サイト)
https://neofusion.github.io/hierarchy-select/
プラグインファイルのダウンロードページ
プラグインファイルのダウンロードページ(本家サイト)
https://github.com/NeoFusion/hierarchy-select
セッティング
プラグインファイルをダウンロードし、以下のファイルをページに読み込みませます。
<script src="hierarchy-select.min.js"></script> <link rel="stylesheet" href="pygments.css"> <link rel="stylesheet" href="hierarchy-select.min.css">
階層表示+入力候補検索機能付きセレクトメニュー
インプットフォームに文字を入力すれば、リストの中から一致する文字列のみ表示します。
html
<div class="panel panel-default"> <div class="panel-body"> <form> <div class="btn-group hierarchy-select" data-resize="auto" id="example-one"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="selected-label pull-left"> </span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu open"> <div class="hs-searchbox"> <input type="text" class="form-control" autocomplete="off"> </div> <ul class="dropdown-menu inner" role="menu"> <li data-value="" data-level="1" data-default-selected=""> <a href="#">All categories</a> </li> <li data-value="1" data-level="1"> <a href="#">Wine</a> </li> <li data-value="2" data-level="2"> <a href="#">Color</a> </li> <li data-value="3" data-level="3"> <a href="#">Red</a> </li> <li data-value="4" data-level="3"> <a href="#">White</a> </li> <li data-value="5" data-level="3"> <a href="#">Rose</a> </li> <li data-value="6" data-level="2"> <a href="#">Country</a> </li> <li data-value="7" data-level="3"> <a href="#">Marokko</a> </li> <li data-value="8" data-level="3"> <a href="#">Russia</a> </li> <li data-value="9" data-level="2"> <a href="#">Sugar Content</a> </li> <li data-value="10" data-level="3"> <a href="#">Semi Sweet</a> </li> </ul> </div> <input class="hidden hidden-field" name="example_one" readonly="readonly" aria-hidden="true" type="text"/> </div> </form> </div> </div>
javascript
$('#example-one').hierarchySelect({ width: 200 });
階層表示なし+入力候補検索機能付きセレクトメニュー
以下のこのようにセレクトメニューを階層表示にしないで、シンプルなリストにすることもできます。
インプットフォームに文字を入力すれば、リストの中から一致する文字列のみ表示します。
html
<div class="panel panel-default"> <div class="panel-body"> <form> <div class="btn-group hierarchy-select" data-resize="auto" id="example-two"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="selected-label pull-left"> </span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu open"> <div class="hs-searchbox"> <input type="text" class="form-control" autocomplete="off"> </div> <ul class="dropdown-menu inner" role="menu"> <li data-value="" data-default-selected=""> <a href="#">All colors</a> </li> <li data-value="1"> <a href="#">Red</a> </li> <li data-value="2"> <a href="#">Orange</a> </li> <li data-value="3"> <a href="#">Yellow</a> </li> <li data-value="4"> <a href="#">Green</a> </li> <li data-value="5"> <a href="#">Blue</a> </li> <li data-value="6"> <a href="#">Purple</a> </li> <li data-value="7"> <a href="#">Pink</a> </li> <li data-value="8"> <a href="#">Brown</a> </li> <li data-value="9"> <a href="#">Black</a> </li> <li data-value="10"> <a href="#">Grey</a> </li> </ul> </div> <input class="hidden hidden-field" name="example_two" readonly="readonly" aria-hidden="true" type="text"/> </div> </form> </div> </div>
javascript
階層表示をしない場合は、hierarchy: false,を指定するだけ。
$('#example-two').hierarchySelect({ hierarchy: false, width: 200 });
階層表示なし+入力候補検索機なしのセレクトメニュー
以下のように、入力補助もなし、階層表示もない、シンプルなセレクトメニューにもできます。
html
<div class="panel panel-default"> <div class="panel-body"> <form> <div class="btn-group hierarchy-select" data-resize="auto" id="example-three"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="selected-label pull-left"> </span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu open"> <div class="hs-searchbox"> <input type="text" class="form-control" autocomplete="off"> </div> <ul class="dropdown-menu inner" role="menu"> <li data-value="" data-default-selected=""> <a href="#">All colors</a> </li> <li data-value="1"> <a href="#">Red</a> </li> <li data-value="2"> <a href="#">Orange</a> </li> <li data-value="3"> <a href="#">Yellow</a> </li> <li data-value="4"> <a href="#">Green</a> </li> <li data-value="5"> <a href="#">Blue</a> </li> <li data-value="6"> <a href="#">Purple</a> </li> <li data-value="7"> <a href="#">Pink</a> </li> <li data-value="8"> <a href="#">Brown</a> </li> <li data-value="9"> <a href="#">Black</a> </li> <li data-value="10"> <a href="#">Grey</a> </li> </ul> </div> <input class="hidden hidden-field" name="example_three" readonly="readonly" aria-hidden="true" type="text"/> </div> </form> </div> </div>
javascript
Javascriptで、hierarchy: false,search: false,を指定するだけ。
$('#example-three').hierarchySelect({ hierarchy: false, search: false, width: 200 });
以上、試してみてください。