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. 電子書籍サーチの紹介

    未分類

    これは捗る!電子書籍サービスから横断して書籍を検索できるサイト
  2. ネタ

    民放各局が放送拒否したパナソニックの「スマートビエラ」のCMがYoutubeで公…
  3. 子育て

    おむつかぶれをしっかり防ぐ為のたった3つのコツ
  4. デジタル機器

    遂にきた!!カシオがアウトドア対応のスマートウォッチを7万円で発売予定(ただしG…
  5. インターネット関連のニュース

    社内SE大忙し。来年には『Windows 10への自動アップグレード』が開始
PAGE TOP