今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. クリック操作でWebサイトを翻訳「translate.js」
  4. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」
  5. クリックで開閉!ドロップダウン・サイドメニュー「Tendina」

リストやテーブルから文字列を検索(絞り込む)「Searcher」 - jQueryプラグイン

スポンサーリンク

リストやテーブルから文字列を検索する(絞り込む)プラグイン「Searcher」を紹介します。

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

スポンサーリンク

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