テーブルやリストから文字列を検索「QuickSearch」

tags:, , , ,

テーブルやリストから文字列を検索するプラグイン「QuickSearch」を紹介します。

jQueryプラグイン「QuickSearch」

このプラグインを使えば、入力した文字列に応じて HTMLの要素 table や list からリストを絞り込んでいく(検索する)ことができます。「Two levels collapsable lists」と同様の機能をもち、Tableにも適用てきるところが便利ですね。日本語も検索できますよー。

スポンサーリンク

デモのフォームに、数字・アルファベット・ひらがな・漢字などを入力してみてください。

「QuickSearch」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="QuickSearchのデモでーす。">
<title>QuickSearch - jQuery Plugin Demo</title>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<script src="jquery.quicksearch.js"></script>
<script>
$(function () {
  $('input#id_search').quicksearch('table tbody tr');
});
</script>
</head>
<body>
<h1>QuickSearchのデモでーす。</h1>
	
<form action="#">
  <input type="text" name="search" value="" id="id_search" />
</form>

<table class="table_example">
<thead>
  <tr><th>Version</th><th>CodeName</th><th>Release</th><th>Package</th><th>テスト</th></tr>
</thead>
<tbody>
  <tr><td>1.1</td><td>buzz</td><td>1996</td><td>474</td><td>あ</td></tr>
  <tr><td>1.2</td><td>rex</td><td>1996</td><td>848</td><td>い</td></tr>
  <tr><td>1.3</td><td>bo</td><td>1997</td><td>974</td><td>う</td></tr>
  <tr><td>2.0</td><td>hamm</td><td>1998</td><td>1500</td><td>え</td></tr>
  <tr><td>2.1</td><td>slink</td><td>1999</td><td>2250</td><td>お</td></tr>
  <tr><td>2.2</td><td>potato</td><td>2000</td><td>3900</td><td>日本</td></tr>
  <tr><td>3.0</td><td>woody</td><td>2002</td><td>8500</td><td>東京</td></tr>
  <tr><td>3.1</td><td>sarge</td><td>2005</td><td>15400</td><td>東京特許許可局</td></tr>
  <tr><td>4.0</td><td>etch</td><td>2007</td><td>18000</td><td>テスト</td></tr>
  <tr><td>5.0</td><td>lenny</td><td>2009</td><td>28000</td><td>でびあん</td></tr>
  <tr><td>6.0</td><td>squeeze</td><td>2011</td><td>29000</td><td>いおう</td></tr>
  <tr><td>7.0</td><td>wheezy</td><td>2013</td><td>?</td><td>いおあ</td></tr>
</tbody>
</table>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)