簡単！階層的なドロップダウン（セレクトメニュー）を実装できるbootstrap＋jQueryプラグインHierarchy Select

投稿日: 投稿者: kishiken

階層的なドロップダウン（セレクトメニュー）を実装できる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">&nbsp;</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">&nbsp;</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">&nbsp;</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
});

以上、試してみてください。

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする

こんな記事も読まれています。