jQuery テーブル検索が簡単に実装できる【Quicksearch】の使い方

どうもこんばんは。今日はとても便利なプラグインの紹介です。【テーブル検索が簡単に実装できるQuicksearchの使い方】Jquery日本語マニュアルさまでも実装してる簡易検索プラグインです。諸処活用できそうなので改めてここにまとめておきます。

Quicksearch

githubからjquery.quicksearch.jsがダウンロードできます。

実装方法

検索ワードを入力すると自動的に該当項目への絞り込み検索が実行できます。

js

<script type="text/javascript">
<script type="text/javascript">
$(function search() {
  $(‘input#search’).quicksearch(‘table#tablelist tr’, {
    ‘delay’:300,
    ‘selector’:’td’,
    ‘stripeRows’:[‘odd’,’even’],
    ‘loader’:’span.loading’,//読み込み中に表示する対象
    ‘noResults’: ‘tr#noresults’,//検索該当無しの場合表示する対象
    ‘bind’:’keyup click change’,//絞り込み開始のイベント
    ‘show’: function () {
    $(this).addClass(‘show’);},//絞り込まれた対象へ装飾を行います
    ‘hide’: function () {
    $(this).removeClass(‘show’);},//絞り込みから除外された対象へ装飾を行います
    ‘prepareQuery’: function (val) {
    return new RegExp(val, "i");},
    ‘testQuery’: function (query, txt, _row) {
    return query.test(txt);}
  });
});
</script>

HTML

<form>
	<input type="text" name="search" value="" id="search">
	<span class="loading"><img src="https://zxcvbnmnbvcxz.com/wp/wp-content/uploads/2012/05/3.gif"></span>
</form>
<table id="tablelist">
	<tr><td>ここに検索対象のテキストを挿入します</td></tr>
	<tr><td>ここに検索対象のテキストを挿入します</td></tr>
	<tr><td>ここに検索対象のテキストを挿入します</td></tr>
	<tr><td>ここに検索対象のテキストを挿入…</td></tr>
	<tr id="noresults"><td>見つかりませんでした</td></tr>
</table>

CSS

.loading img{padding:5px; float: right;}
#tablelist tr{display:none; width:560px;}
#tablelist tr.show{display: block;}
#tablelist tr.odd{background:#fafafa;}
#tablelist tr.even{background:none;}
#tablelist tr td{padding:5px;}

DEMO

以上です。