リストやテーブルから文字列を検索（絞り込む）「Searcher」 - jQueryプラグイン
当ページのリンクには広告が含まれています。
スポンサーリンク
リストやテーブルから文字列を検索する（絞り込む）プラグイン「Searcher」を紹介します。
Searcher
このプラグインを使えば、候補の多いリストやテーブルから文字列を絞り込むことができます。文字を入力すると動的に候補が絞りこまれていくので、ユーザーの利便性に最適ですね。
スポンサーリンク
デモのインプットフォームに文字列を入力し、テーブルのコンテンツを検索してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Searcherのデモでーす。">
<title>Searcher - jQueryプラグイン</title>
</head>
<body>
<h1>Searcherのデモでーす。</h1>
<input id="tablesearchinput" />
<table id="tabledata">
<tbody>
<tr><td>1992</td><td>スペイン（Spain）</td><td>バルセロナ（Barcelona）</td></tr>
<tr><td>1996</td><td>アメリカ合衆国（United States）</td><td>アトランタ（Atlanta）</td></tr>
<tr><td>2000</td><td>オーストラリア（ Australia）</td><td>シドニー（Sydney）</td></tr>
<tr><td>2004</td><td>ギリシャ（Greece）</td><td>アテネ（Athens）</td></tr>
<tr><td>2008</td><td>中国（China）</td><td>北京（Beijing）</td></tr>
<tr><td>2012</td><td>イギリス（United Kingdom）</td><td>ロンドン（London）</td></tr>
<tr><td>2016</td><td>ブラジル（Brazil）</td><td>リオデジャネイロ（Rio de Janeiro）</td></tr>
<tr><td>2020</td><td>日本（Japan）</td><td>東京（Tokyo）</td></tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.searcher.js"></script>
<script>
$("#tabledata").searcher({
inputSelector: "#tablesearchinput"
});
</script>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» Searcher
スポンサーリンク