別に運営しているサイトで『用語集』というコンテンツを、jQuery Mobileを使って作ったものの、検索機能を実装していませんでした。
でも最近、ul要素にtrueという値をしたdata-filter属性を入れると検索フィルターを簡単に実装できるとしり以下のように実装してみることに。
<!DOCTYPE html> <html> <head> <title>検索フィルター</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="content"> <ul data-role="listview" data-filter="true"> <li><a href="http://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E"><h3>C言語</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/C%2B%2B"><h3>C++</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/C_Sharp"><h3>C#</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/Java"><h3>Java</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/JavaScript"><h3>JavaScript</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor"><h3>PHP</h3></a></li> <li><a href="http://ja.wikipedia.org/wiki/Perl"><h3>Perl</h3></a></li> </ul> </div> </body> </html>
実行結果は以下。試しに”Java”などと入力してみてください
http://amyu.minibird.jp/filter.html
そういえば前にjQueryで作った検索フィルターの方法をこのブログに書きましたが(dtタグのテキストをインスタンス検索してみる(jQuery利用) | while(isプログラマ))、この度追記しました。
何を追記したかというと、instanceイベントを使うことにより、右クリックで貼り付けを選んでもすぐに反映されるということを追記しました。
ただ、今回紹介した検索フィルターでは右クリックで貼り付けを選んでもすぐに反映されないようです。
コメント