- blogs:
- cles::blog
2016/12/10

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

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 )で呼出します。ソースコードは以下のような感じになりますが、基本的には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 を使ってログインすることができます。
サイト内検索
検索ワードランキング
へぇが多いエントリ
- crontab -r とやってしまった... (2)
- Jawbone Companion (beta) (1)
- GPS ロガーを自作 (1)
- MPC-HC で連続再生を行う(解... (1)
閲覧数が多いエントリ
1 . アーロンチェアのポスチャーフィットを修理(114375)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(112905)
3 . 年次の人間ドックへ(112336)
4 . 2023 年分の確定申告完了!(1つめ)(111901)
5 . 三菱鉛筆がラミーを買収(111779)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(112905)
3 . 年次の人間ドックへ(112336)
4 . 2023 年分の確定申告完了!(1つめ)(111901)
5 . 三菱鉛筆がラミーを買収(111779)
cles::blogについて
Referrers