jQuery Searcher：動的に絞り込み検索ができるJSプラグインのサンプル
jQuery Searcherは動的に絞り込み検索を実行してくれるJSプラグインです。
jQuery UIのautoCompleteを使うことでも似たような実装が可能ですが、autoCompleteの場合、候補が何なのかデフォルトでは表示されていません。
jQuery Searcherはデフォルトで候補を全表示した状態から絞り込んでいきますので、その点で使い分けができるかと思います。
どのような動作が可能か、まずはサンプルを見てみましょう。
サンプル作成方法
それでは記述方法を確認していきましょう。
まずHTMLソースで選択肢一覧を作成します。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="[jquery.searcher.jsファイルを配置したパス]/jquery.searcher.js"></script>
<script>
<!--※ここに後で説明するスクリプトを記載します※-->
</script>
</head>
<body>
<input id="listsearchinput" />
<ol id="listdata">
<li>おいしいスイーツ1：クレープ</li>
<li>おいしいスイーツ2：チョコレートケーキ</li>
<li>おいしいスイーツ3：マカロン</li>
...
</ol>
</body>
</html>
上記の※印のエリアに、下記のスクリプトを追加しましょう。
$("#listdata").searcher({
itemSelector: "li",
textSelector: "",
inputSelector: "#listsearchinput"
});
記述できたらブラウザからHTMLを表示してみましょう。
テキストボックスに入力した文字列に応じて、選択した項目が変わっていることが確認できるかと思います。
参考
ダウンロードサイト：http://lloiser.github.io/jquery-searcher/
まとめ
今回はjQuery Searcherを使用して、ローディングイメージを表示するサンプルを作成しました。
選択肢が沢山あるような場合に候補を検出するために非常に有用なプラグインでした。
jQuery UIのautoCompleteと合わせて、使用機会が色々考えられますね。
