最近、社内では狩りが流行っているようですが、そんな事には目もくれず、自宅で Leap Motion を使っている姿を子供に見られて怪しまれている岩本です。（ウソ）
ですが、Leap Motion で遊んでいるのはホントなので、別の機会で記事にでもしたいと思います。
さて、今回は、過去に書いたコードからのTIPSになるのですが、jQueryでのインクリメンタルサーチの実装について書いてみたいと思います。
今回紹介するインクリメンタルサーチは、インクリメンタルにサーバーからの結果を表示するアレではなく、既にロードされたコンテンツをインクリメンタルに絞り込むアレです。
という事で、まずはデモを見ていただきましょう。
フォームに適当に（引っ掛かりそうな）キーワードを入力してみてください。
上手く絞り込まれましたでしょうか。
ポイントは、漢字の読みとか英単語のカタカナ表記は別として、ひらなが、カタカナ、半角英数字、全角英数字のどのパターンでも絞り込める事です。
実際のコードは下記のような感じになってます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> $('#Search1').keyup(function(){ if (!$(this).val()) { // 検索文字列無し $('#MyBookmark1 tr').show(); } else { // 検索文字列有り $('#MyBookmark1 tr').hide(); $('#MyBookmark1 tr:contains(' + this.value + ')').show(); } }); </script> <table id="MyBookmark1"> <tr> <td><span style="display:none;">あらいどあーきてくつこーぽれーとさいとアライドアーキテクツコーポレートサイト</span><a href="http://www.aainc.co.jp/" target="_blank">アライドアーキテクツ株式会社 コーポレートサイト</a></td> </tr> <tr> <td><span style="display:none;">もにぷらモニプラMONIPLAmoniplaＭＯＮＩＰＬＡｍｏｎｉｐｌａ</span><a href="http://monipla.com/" target="_blank">モニプラ / MONIPLA</a></td> </tr> ： ： </table> |
このタイプのインクリメンタルサーチの例としてよく見かけるのが、実際に表示しているテキスト、即ち今回の例ですと <a href=””> ～ </a> のテキストをサーチするパターンです。
ただ、これではサーチ対象としては不十分だと考え、CSSで非表示にしたサーチ用のテキストを用意し、実際に表示しているテキストを変換できうる限り、ひらがな、カタカナ、半角英数字、全角英数字に変換した内容にしています。今回の例ですと <span style=”display:none;”> ～ </span> の部分となります。
対象を絞り込むロジックの部分は、キーが離される度に絞り込む要素毎に hide() し、:contains() で引っ掛かった対象を show() してます。また、検索文字列が空の場合は、全ての要素を show() してます。
次に、階層を持った構造のインクリメンタルサーチの例です。
こちらもデモを用意しました。検索対象は子要素です。
こちらも最初の例と同様に、より検索キーワードに引っ掛かりやすくするために、検索用のテキストを用意しています。
実際のコードは下記のような感じになってます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script> $('#Search2').keyup(function(){ if (!$(this).val()) { // 検索文字列無し $('#MyBookmark2 div.Folder, #MyBookmark2 div.Folder ul li').show(); } else { // 検索文字列有り $('#MyBookmark2 div.Folder, #MyBookmark2 div.Folder ul li').hide(); $('#MyBookmark2 div.Folder ul li:contains(' + this.value + ')').show(); $('#MyBookmark2 div.Folder ul li:contains(' + this.value + ')').parent().parent().show(); } }); </script> <div id="MyBookmark2"> <div class="Folder"> <div class="FolderName">アライドアーキテクツ</div> <ul class="SearchItems"> <li class="SearchItem"> ┣ <span style="display:none">あらいどあーきてくつこーぽれーとさいとアライドアーキテクツコーポレートサイト</span><a href="http://www.aainc.co.jp/" class="ItemName" target="_blank">アライドアーキテクツ株式会社 コーポレートサイト</a> </li> <li class="SearchItem"> ┣ <span style="display:none">もにぷらモニプラMONIPLAmoniplaＭＯＮＩＰＬＡｍｏｎｉｐｌａ</span><a href="http://monipla.com/" class="ItemName" target="_blank">モニプラ / MONIPLA</a> </li> ： ： <!-- .items --></ul> <!-- .Folder --></div> <div class="Folder"> <div class="FolderName">MovableType</div> <ul class="SearchItems"> <li class="SearchItem"> ┣ <span style="display:none">ゆーざーこみゅにてぃユーザーコミュニティMTQMOVABLETYPE5mtqmovabletype5ＭＴＱＭＯＶＡＢＬＥＴＹＰＥ５ｍｔｑｍｏｖａｂｌｅｔｙｐｅ５</span><a href="http://communities.movabletype.jp/" class="ItemName" target="_blank">MTQ | Movable Type 5 ユーザーコミュニティ</a> </li> <li class="SearchItem"> ┣ <span style="display:none">でえんとりのおぷしょんをゆーざーでにするデエントリノオプションヲユーザーデニスルﾙMOVABLETYPEmovabletypeＭＯＶＡＢＬＥＴＹＰＥｍｏｖａｂｌｅｔｙｐｅ</span><a href="http://junnama.alfasado.net/online/2010/05/movable_type_9.html" class="ItemName" target="_blank">Movable Typeでエントリの表示オプションを全ユーザーで同一にする。</a> </li> ： ： <!-- .items --></ul> <!-- .Folder --></div> ： ： </div> |
絞り込みのロジックは最初の例と殆ど同じですが、今回は、子要素で検索文字列が引っ掛からなかった場合はその親要素も非表示にしているので、キーが離される度に各親要素と子要素を個別に hide() し、:contains() で引っ掛かった対象とその親要素を show() してます。
言葉で説明するの難しい～！
ちなみに、ブラウザのJavaScriptエンジンの性能にもよりますが、1000要素ぐらいまでならサクサクと検索できるようです。
階層構造にした場合は、階層構造を如何にシンプルにできるかがポイントです。
という事で、アライドアーキテクツではロジックを言葉で説明するのが上手いエンジニアや、Leap Motion みたいなガジェット大好きなエンジニアを募集しています。
アライドアーキテクツに興味を持たれた方は、こちらのエンジニア採用サイトをご覧いただき、是非、ご応募ください！
お待ちしてます！
現在の主な仕事はプロジェクトマネジメントです。 Tips情報等、ライトな話題を中心に書いて行ければと思っています。
