BLOGTIMES
2016/12/10

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

  javascript 
このエントリーをはてなブックマークに追加

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

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

絞り込み:

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


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

サンプルのソースコード

今回も CDNJS 経由(jquery.quicksearch - cdnjs.com )で呼出します。ソースコードは以下のような感じになりますが、基本的には1行でやりたいことができます。プラグイン様々という感じですが、正直こんなに簡単に実装できるものだとは思っていませんでした。ちなみにテーブルだけでなく、絞り込みは<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>

    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/9002
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン