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

実装の前に

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

スコープを隠蔽する

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

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

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

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

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

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

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

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

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

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

外部ファイル化

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

Suggest機能

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

動作イメージ

検索テキストボックスに文字列を入力すると，検索テキストボックスの下に関連するキーワードが表示されます（図1）。 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のデータとして使います。