Allied ArchitectsAllied ArchitectsEngineer Blog

jQueryを使ってインクリメンタルサーチを実装してみる

2013/11/26 jQuery

最近、社内では狩りが流行っているようですが、そんな事には目もくれず、自宅で Leap Motion を使っている姿を子供に見られて怪しまれている岩本です。(ウソ)
ですが、Leap Motion で遊んでいるのはホントなので、別の機会で記事にでもしたいと思います。

さて、今回は、過去に書いたコードからのTIPSになるのですが、jQueryでのインクリメンタルサーチの実装について書いてみたいと思います。
今回紹介するインクリメンタルサーチは、インクリメンタルにサーバーからの結果を表示するアレではなく、既にロードされたコンテンツをインクリメンタルに絞り込むアレです。

という事で、まずはデモを見ていただきましょう。
フォームに適当に(引っ掛かりそうな)キーワードを入力してみてください。

あらいどあーきてくつこーぽれーとさいとアライドアーキテクツコーポレートサイトアライドアーキテクツ株式会社 コーポレートサイト
もにぷらモニプラMONIPLAmoniplaMONIPLAmoniplaモニプラ / MONIPLA
そーしゃるめでぃあまーけてぃんぐらぼソーシャルメディアマーケティングラボSMMLABsmmlabSMMLABsmmlabソーシャルメディアマーケティングラボ / SMMLab
にっぽんのおのぴーちくにっぽんのおのぴーちくニッポンのお茶の間 ピーチク
ゆーざーこみゅにてぃユーザーコミュニティMTQMOVABLETYPE5mtqmovabletype5MTQMOVABLETYPE5mtqmovabletype5MTQ | Movable Type 5 ユーザーコミュニティ
でえんとりのおぷしょんをゆーざーでにするデエントリノオプションヲユーザーデニスルルMOVABLETYPEmovabletypeMOVABLETYPEmovabletypeMovable Typeでエントリの表示オプションを全ユーザーで同一にする。
ぶろぐごとにてんぷれーとをするブログゴトニテンプレートヲスルブログごとに検索結果テンプレートを変更する
からふぁいるにをみすとおかしながカラファイルニヲミストオカシナガMTASSETmtassetMTASSETmtassetMT::Assetからファイル名を条件に画像を読み出すとおかしな現象が
JQUERYSTACKTRACEjquerystacktraceJQUERYSTACKTRACEjquerystacktracejQuery – StackTrace
をくするのヲクスルノJQUERY25TIPSjquery25tipsJQUERY25TIPSjquery25tipsjQueryを良くする25のTIPS
をにうせれくたのきヲニウセレクタノキJQUERYCSSjquerycssJQUERYCSSjquerycssjQuery を高速に使う CSS セレクタの書き方
AUTOHOTKEYJPautohotkeyjpAUTOHOTKEYJPautohotkeyjpAutoHotkeyJp
をらせるぺーじヲラセルページAUTOHOTKEYautohotkeyAUTOHOTKEYautohotkeyAutoHotkeyを流行らせるページ
のいさんぷるノイサンプルAUTOHOTKEYautohotkeyAUTOHOTKEYautohotkeyAutoHotkeyの使い方 – AutoHotkeyサンプル集

上手く絞り込まれましたでしょうか。
ポイントは、漢字の読みとか英単語のカタカナ表記は別として、ひらなが、カタカナ、半角英数字、全角英数字のどのパターンでも絞り込める事です。

実際のコードは下記のような感じになってます。

このタイプのインクリメンタルサーチの例としてよく見かけるのが、実際に表示しているテキスト、即ち今回の例ですと <a href=””> ~ </a> のテキストをサーチするパターンです。

ただ、これではサーチ対象としては不十分だと考え、CSSで非表示にしたサーチ用のテキストを用意し、実際に表示しているテキストを変換できうる限り、ひらがな、カタカナ、半角英数字、全角英数字に変換した内容にしています。今回の例ですと <span style=”display:none;”> ~ </span> の部分となります。

対象を絞り込むロジックの部分は、キーが離される度に絞り込む要素毎に hide() し、:contains() で引っ掛かった対象を show() してます。また、検索文字列が空の場合は、全ての要素を show() してます。

次に、階層を持った構造のインクリメンタルサーチの例です。
こちらもデモを用意しました。検索対象は子要素です。

アライドアーキテクツ

MovableType

jQuery

AutoHotKey

こちらも最初の例と同様に、より検索キーワードに引っ掛かりやすくするために、検索用のテキストを用意しています。

実際のコードは下記のような感じになってます。

絞り込みのロジックは最初の例と殆ど同じですが、今回は、子要素で検索文字列が引っ掛からなかった場合はその親要素も非表示にしているので、キーが離される度に各親要素と子要素を個別に hide() し、:contains() で引っ掛かった対象とその親要素を show() してます。

言葉で説明するの難しい~!

ちなみに、ブラウザのJavaScriptエンジンの性能にもよりますが、1000要素ぐらいまでならサクサクと検索できるようです。
階層構造にした場合は、階層構造を如何にシンプルにできるかがポイントです。

という事で、アライドアーキテクツではロジックを言葉で説明するのが上手いエンジニアや、Leap Motion みたいなガジェット大好きなエンジニアを募集しています。
アライドアーキテクツに興味を持たれた方は、こちらのエンジニア採用サイトをご覧いただき、是非、ご応募ください!
お待ちしてます!

たいよう
  • たいよう
  • マネージャー
  • 現在の主な仕事はプロジェクトマネジメントです。 Tips情報等、ライトな話題を中心に書いて行ければと思っています。

RELATION ENTRY

開発拠点の距離感

開発拠点の距離感

2018/01/10 取り組み

遅れ馳せながら、新年あけましておめでとうございます 本年もよろしくお願い申し上げます 毎回、あまり開発とは直接関係の無い事を書いている岩本です。(過去の記事はコチラ) 今回は開発拠点の距離感について書いてみたいと思います。 アライドアーキテクツは、ベトナム ハノイにも開発拠点を持っています。そ...

続きを読む

WEBサービスのフロントエンドのテストする際に便利なブックマークレット5選

WEBサービスのフロントエンドのテストす...

2014/10/2 JavaScript

ガジェット大好き岩本です。 以前、Leap Motion で遊んでいるという事を書きましたが、今回は、ようやく Ring が10月に発送される事が決定し、到着が待ち遠しくワクワクしてます! さて、本題です。 最近は自社のWEBサービスのプロダクトマネージメントをしており、新機能をリリースす...

続きを読む

たいようの記事一覧へ

ページTOPへ