階層的なドロップダウン（セレクトメニュー）を実装できる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
});
以上、試してみてください。
