リストやテーブルから文字列を検索する(絞り込む)プラグイン「Searcher」を紹介します。
Searcher
このプラグインを使えば、候補の多いリストやテーブルから文字列を絞り込むことができます。文字を入力すると動的に候補が絞りこまれていくので、ユーザーの利便性に最適ですね。
デモのインプットフォームに文字列を入力し、テーブルのコンテンツを検索してみてください。
「Searcher」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Searcherのデモでーす。" > |
< title >Searcher - jQueryプラグイン</ title > |
< input id = "tablesearchinput" /> |
< 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 > |
< script src = "http://code.jquery.com/jquery.js" ></ script > |
< script src = "jquery.searcher.js" ></ script > |
$("#tabledata").searcher({ |
inputSelector: "#tablesearchinput" |
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» Searcher