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. Do!Premiumの使い方

    未分類

    可愛くてオシャレなTodoアプリならDo! Premiumがガチおすすめ
  2. iPhoneアプリ

    ブロガー必須のアプリ「するぷろ for iPhone」をインストールしてみた
  3. 家電

    テレビの音声を手元でクリアに聴けるオシャレなコンパクトスピーカー「SC-MC20…
  4. 気になるアイテム

    自宅の玄関に簡単に設置できる宅配ボックスが五千円未満でサンワサプライから発売!
  5. iPhone

    [iOS 7]アプリの自動アップデートを無効にする方法
PAGE TOP