これでもPGだのSEだのをやってるいつき @itukizora ですこんにちは。最近はOracle相手に闘ってます。
ところで、新しいWebシステムを構築するにあたってテーブル内容のフィルタリング機能を実装したいなぁと思い、どうせなら自分で作るよりも既に存在しているプラグインを使わせていただこうと手抜きに走ることに。
いろいろと調べてみたところ、QuicksearchというjQueryプラグインがよさそうな感じでしたのメモ的にご紹介しておきたいと思います。
テーブルの中身をインクリメンタルサーチで検索（フィルタリング）できるjQueryのプラグインはいろいろとありますが、その中でも（いろいろな理由あって）最強と思っています！ Quicksearch！
気に入った点、複数キーワードが使える
特に気に入っているのが複数キーワードでのAND検索ができること。これです。この機能を探していたのです！
例えば「リンゴ」と入力するとこんな感じでフィルタリングされます。しかしこれではまた２つ表示されてしまいます。
ここで半角スペースで区切って「水」と複数のキーワードを入力すると、１つに絞られます。もうこれ素敵。
ローディング画像も表示できる
オプション設定ですが、フィルタリング中にローディング画像も表示することができます。
使い方
実装方法は簡単です。
単体のJSファイルをロードするだけ。
超基本な点しか記載していませんが、サンプルHTMLを作成しましたので参考にしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Search</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<!-- jQuery Plugin ::: QuickSearch -->
<script src="js/jquery.quicksearch.js"></script>
<link href="css/jquery.quicksearch.css" rel="stylesheet">
<script>
$(function() {
$('input#id_search').quicksearch('table#tablelist tbody tr', {
'stripeRows':['odd','even'],
'loader':'span.loading', // ローディング画像（オプション）
'noResults': 'tr#noresults', // 「結果なし」の表示（オプション）
'bind':'keyup click change', // どのタイミングでフィルタ処理するか
});
});
</script>
</head>
<BODY>
<FORM action="#">
<INPUT type="text" name="search" id="id_search" value="" style="width:300px;" />
<SPAN class="loading"><IMG src="img/loading.gif"></SPAN>
</FORM>
<TABLE id="tablelist">
<THEAD>
<TR><TH>材料</TH><TH>できる物</TH><TH>値段</TH></TR>
</THEAD>
<TBODY>
<TR><TD>リンゴ、水</TD><TD>リンゴジュース</TD><TD>1800円</TD></TR>
<TR><TD>オレンジ、水</TD><TD>オレンジジュース</TD><TD>1200円</TD></TR>
<TR><TD>パイナップル、水</TD><TD>パイナップルジュース</TD><TD>1800円</TD></TR>
<TR><TD>桃</TD><TD>桃のジューシー</TD><TD>500円</TD></TR>
<TR><TD>リンゴ、オレンジ</TD><TD>リンゴオレ</TD><TD>300円</TD></TR>
<TR><TD>水</TD><TD>ウォーター</TD><TD>1000円</TD></TR>
<TR><TD>ココナッツ</TD><TD>バナナジュース</TD><TD>200円</TD></TR>
<TR><TD>桃、サイダー</TD><TD>サイダー</TD><TD>1200円</TD></TR>
<TR id="noresults"><td colspan="3">結果が見つかりませんでした。</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
またCSSファイルは下記のようにしています。（あくまでサンプル）
.loading img{padding:5px; }
#tablelist tr{
}
#tablelist tr.show{
display: block;
}
#tablelist tr.odd{
background:#fafafa;
}
#tablelist tr.even{
background:none;
}
#tablelist tr td{
}
とても使いやすいQuicksearch、インクリメンタルサーチでのテーブルフィルタリングを検討されている方はぜひ候補にどうぞ！
ではでは。
この記事へのコメントはありません。