jQuery

  (最終更新日:2015.06.5)

Quicksearch:複数キーワードでテーブルのインクリメント検索もできるjQuery Plugin

2015-06-05_13h36_13これでもPGだのSEだのをやってるいつき @itukizora ですこんにちは。最近はOracle相手に闘ってます。

ところで、新しいWebシステムを構築するにあたってテーブル内容のフィルタリング機能を実装したいなぁと思い、どうせなら自分で作るよりも既に存在しているプラグインを使わせていただこうと手抜きに走ることに。

いろいろと調べてみたところ、QuicksearchというjQueryプラグインがよさそうな感じでしたのメモ的にご紹介しておきたいと思います。

テーブルの中身をインクリメンタルサーチで検索(フィルタリング)できるjQueryのプラグインはいろいろとありますが、その中でも(いろいろな理由あって)最強と思っています! Quicksearch

気に入った点、複数キーワードが使える

特に気に入っているのが複数キーワードでのAND検索ができること。これです。この機能を探していたのです!

例えば「リンゴ」と入力するとこんな感じでフィルタリングされます。しかしこれではまた2つ表示されてしまいます。
2015-06-05_11h47_37
ここで半角スペースで区切って「水」と複数のキーワードを入力すると、1つに絞られます。もうこれ素敵。
2015-06-05_11h47_51

ローディング画像も表示できる

オプション設定ですが、フィルタリング中にローディング画像も表示することができます。
2015-06-05_11h50_16

使い方

実装方法は簡単です。
単体の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、インクリメンタルサーチでのテーブルフィルタリングを検討されている方はぜひ候補にどうぞ!

ではでは。

関連記事

  1. jQuery

    QuickSearchプラグインで全角スペースを区切り文字に追加する方法

    jQueryプラグインのQuickSearch、便利ですよね。複数…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

Twitter

  1. LINE

    プレリリースのLINE Playが微妙に楽しくなくて残念な件。これからに期待した…
  2. Facebookのハイライトと最新情報の違い

    未分類

    Facebookタイムラインの「ハイライト」と「最新情報」の違い
  3. ゲート2 自衛隊彼の地にて斯く戦えり。2巻を購入!城壁防衛戦での自衛隊無双が圧巻…
  4. デジタル機器

    アルミ削り出しボディが際立つ。ASUSから液晶一体型のPC「Zen AiO」が発…
  5. iPhone

    【要注意!!】iPhoneからメールを送ると「連絡先に登録している名前」が相手に…
PAGE TOP