jQueryではじめるAjax

第4回 検索キーワードを提案するSuggest機能の実装

この記事を読むのに必要な時間:およそ 6 分

今回は,検索文字列に関連するキーワードを提案するSuggest機能を実装したいと思います。

実装の前に

Suggest機能の実装に入る前に,第3回までのプログラムをちょっと整理しましょう。第3回までの実装では,とりあえずグローバルな名前空間に関数を追加していました。しかし,名前空間がどんどん汚染されよくありません。必要なものだけをグローバルな名前空間に追加しましょう。

スコープを隠蔽する

jQueryにならって,スコープを隠蔽してみることにします。次のように無名関数を使って実装しますリスト1)。

リスト1 スコープの隠蔽

(function(){
    // (1) このスコープは公開されない 
    var local = ・・・

    // (2) 必要なものだけを公開する 
    window.global = ・・・
})();

無名関数の定義(function(){})と,実行()を同時に行っています。 リスト3-(1)のlocalという変数は無名関数のローカルスコープにあるため,外部から直接参照することはできません。 リスト3-(2)のglobalのようにwindowオブジェクトに追加することにより,外部に参照を公開することができます。

Youtubeコンストラクタ関数の定義

Youtubeというコンストラクタ関数を作成し,それを基にした新しいオブジェクトをwindowオブジェクトに追加します。 第3回までのページロード時以外の実装はとりあえずここに押し込めることにしますリスト2)。

リスト2 Youtubeコンストラクタ関数

(function(){
    // コンストラクタ関数の定義 
    var Youtube = function() {
        ・・・
    }
    Youtube.prototype = {
        ・・・
    }

    // 名前空間 window.yt に公開 
    window.yt = new Youtube();
})();

これで,名前空間の汚染は最小限になりました。

今回は,単純に名前空間 window.yt という名前空間に実装を押し込めただけで,コンストラクタ関数を作成した意味があまりありません。 必要に応じて実装を拡張してください。

外部ファイル化

さらにこの実装を, Youtube.jsファイルとして外部ファイルに移動しました。 これで少しすっきりしましたね。

Suggest機能

それでは,Suggest機能の実装に入りたいと思います。

動作イメージ

検索テキストボックスに文字列を入力すると,検索テキストボックスの下に関連するキーワードが表示されます図1)。 Suggest機能とは,このようにキーワードを提案(Suggest)して,検索を補助する機能です。

Suggest機能

機能概要

今回実装する機能の要件は次のとおりです。

  • 検索テキストボックスに文字列を入力すると,500ミリ秒後に関連するキーワード(以下 Suggest)を表示する。
  • Suggestが表示されていない場合,検索テキストボックスで「↓」を押すとSuggestを表示する。
  • Suggestが表示されている場合,検索テキストボックスで「↓」を押すとSuggestにフォーカスを移動する。
  • Suggestを選択すると,検索テキストボックスに選択したSuggestを設定する。
  • Suggestをダブルクリックすると,検索テキストボックスにダブルクリックしたSuggestを設定し,検索する。
  • ESCキーを押すとSuggestを閉じる。
  • Suggestがない場合は何も表示しない。

Suggestデータ

Youtube APIにはSuggest用のAPIやデータは用意されていません。 今回は,動画に設定されたキーワード(feed.entry[n].media$group.media$keywords.$t)をSuggestのデータとして使います。

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。

コメント

コメントの記入