まだデータがありません。
テーブルやリストから文字列を検索「QuickSearch」
当ページのリンクには広告が含まれています。
スポンサーリンク
テーブルやリストから文字列を検索するプラグイン「QuickSearch」を紹介します。
jQueryプラグイン「QuickSearch」
このプラグインを使えば、入力した文字列に応じて HTMLの要素 table や list からリストを絞り込んでいく（検索する）ことができます。「Two levels collapsable lists」と同様の機能をもち、Tableにも適用てきるところが便利ですね。日本語も検索できますよー。
スポンサーリンク
デモのフォームに、数字・アルファベット・ひらがな・漢字などを入力してみてください。
ソース（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>
スポンサーリンク