今回は，検索文字列に関連するキーワードを提案する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）して，検索を補助する機能です。
機能概要
今回実装する機能の要件は次のとおりです。
- 検索テキストボックスに文字列を入力すると，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のデータとして使います。
