jquery.quicksearch で HTML をリアルタイムに絞り込み

javascript

HTML 要素を入力された内容に従ってインクリメンタルに絞り込みができる方法がないかと思って探してみたところ Quicksearch が便利そうだったのでメモ。

以下のサンプルにあるテキストフィールドに文字を入力すると、内容を含む行だけにインクリメンタルに絞り込まれます。

絞り込み：

#	名前	アドレス	誕生日	血液型	携帯
1	川村愛	kawamura_ai@example.com	2016/8/27	O型	080-9023-5319
2	伊東亮	itou_ryou@example.com	2016/3/20	A型	080-5749-8885
3	吹越メイサ	fukikoshi_meisa@example.com	2016/9/2	A型	080-8467-9743
4	岩本ジョージ	iwamoto_george@example.com	2016/4/26	A型	090-7755-4487
5	坂口由宇	sakaguchi_yuu@example.com	2016/2/20	O型	080-2996-3260
6	ともさか晋也	tomosaka_shinya@example.com	2016/1/10	B型	090-9541- 441
7	日野由宇	hino_yuu@example.com	2016/6/19	A型	080-8083-7137
8	川島晋也	kawashima_shinya@example.com	2016/6/30	A型	080-2459-9810
9	広瀬綾	hirose_aya@example.com	2016/1/5	B型	080-2226-9649
10	泉大五郎	izumi_daigorou@example.com	2016/7/24	A型	080-6989- 726
11	宮崎一代	miyazaki_kazuyo@example.com	2016/9/17	B型	080-1863-6972
12	相馬まひる	aiba_mahiru@example.com	2016/5/31	A型	080-9127- 150
13	水谷啓介	mizutani_keisuke@example.com	2016/10/12	A型	090-5290-2162
14	石橋隆博	ishibashi_takahiro@example.com	2016/3/11	A型	080-6482-2985
15	野崎兼	nozaki_ken@example.com	2016/10/28	A型	090-3927-4369

以下、実装にあたってのメモ。

† サンプルのソースコード

今回も CDNJS 経由（jquery.quicksearch - cdnjs.com ）で呼出します。ソースコードは以下のような感じになりますが、基本的には１行でやりたいことができます。プラグイン様々という感じですが、正直こんなに簡単に実装できるものだとは思っていませんでした。ちなみにテーブルだけでなく、絞り込みは<div>や<button>など任意の要素が指定できるようです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.min.js" integrity="sha256-p4O2FDM/VsnStiXmXzKW9svZQjxXFufx7GKCmrHtsRI=" crossorigin="anonymous"></script>
<script>
(function ($){
        $(document).ready(function(){
                $('#qs').quicksearch('tr.hoge');
        });
})(jQuery.noConflict(true));
</script>
絞り込み：<input id="qs" name="qs" type="text">
<table>
  <tr>#<th></th><th>名前</th><th>アドレス</th><th>誕生日</th><th>血液型</th><th>携帯</th></tr>
  <tr class="target"><td>1</td><td>川村 愛</td><td>kawamura_ai@example.com</td><td>2016/8/27</td><td>O型</td><td>080-9023-5319</td></tr>
  <tr class="target"><td>2</td><td>伊東 亮</td><td>itou_ryou@example.com</td><td>2016/3/20</td><td>A型</td><td>080-5749-8885</td></tr>
  <tr class="target"><td>3</td><td>吹越 メイサ</td><td>fukikoshi_meisa@example.com</td><td>2016/9/2</td><td>A型</td><td>080-8467-9743</td></tr>
  <tr class="target"><td>4</td><td>岩本 ジョージ</td><td>iwamoto_george@example.com</td><td>2016/4/26</td><td>A型</td><td>090-7755-4487</td></tr>
  <tr class="target"><td>5</td><td>坂口 由宇</td><td>sakaguchi_yuu@example.com</td><td>2016/2/20</td><td>O型</td><td>080-2996-3260</td></tr>
  <tr class="target"><td>6</td><td>ともさか 晋也</td><td>tomosaka_shinya@example.com</td><td>2016/1/10</td><td>B型</td><td>090-9541- 441</td></tr>
  <tr class="target"><td>7</td><td>日野 由宇</td><td>hino_yuu@example.com</td><td>2016/6/19</td><td>A型</td><td>080-8083-7137</td></tr>
  <tr class="target"><td>8</td><td>川島 晋也</td><td>kawashima_shinya@example.com</td><td>2016/6/30</td><td>A型</td><td>080-2459-9810</td></tr>
  <tr class="target"><td>9</td><td>広瀬 綾</td><td>hirose_aya@example.com</td><td>2016/1/5</td><td>B型</td><td>080-2226-9649</td></tr>
  <tr class="target"><td>10</td><td>泉 大五郎</td><td>izumi_daigorou@example.com</td><td>2016/7/24</td><td>A型</td><td>080-6989- 726</td></tr>
  <tr class="target"><td>11</td><td>宮崎 一代</td><td>miyazaki_kazuyo@example.com</td><td>2016/9/17</td><td>B型</td><td>080-1863-6972</td></tr>
  <tr class="target"><td>12</td><td>相馬 まひる</td><td>aiba_mahiru@example.com</td><td>2016/5/31</td><td>A型</td><td>080-9127- 150</td></tr>
  <tr class="target"><td>13</td><td>水谷 啓介</td><td>mizutani_keisuke@example.com</td><td>2016/10/12</td><td>A型</td><td>090-5290-2162</td></tr>
  <tr class="target"><td>14</td><td>石橋 隆博</td><td>ishibashi_takahiro@example.com</td><td>2016/3/11</td><td>A型</td><td>080-6482-2985</td></tr>
  <tr class="target"><td>15</td><td>野崎 兼</td><td>nozaki_ken@example.com</td><td>2016/10/28</td><td>A型</td><td>090-3927-4369</td></tr>
</table>