今回は,
実装の前に
Suggest機能の実装に入る前に,
スコープを隠蔽する
jQueryにならって,
リスト1 スコープの隠蔽
(function(){
// (1) このスコープは公開されない
var local = ・・・
// (2) 必要なものだけを公開する
window.global = ・・・
})();
無名関数の定義(function(){})と,
Youtubeコンストラクタ関数の定義
Youtubeというコンストラクタ関数を作成し,
リスト2 Youtubeコンストラクタ関数
(function(){
// コンストラクタ関数の定義
var Youtube = function() {
・・・
}
Youtube.prototype = {
・・・
}
// 名前空間 window.yt に公開
window.yt = new Youtube();
})();
これで,
今回は,
外部ファイル化
さらにこの実装を,
Suggest機能
それでは,
動作イメージ
検索テキストボックスに文字列を入力すると,
機能概要
今回実装する機能の要件は次のとおりです。
- 検索テキストボックスに文字列を入力すると,
500ミリ秒後に関連するキーワード (以下 Suggest) を表示する。 - Suggestが表示されていない場合,
検索テキストボックスで 「↓」 を押すとSuggestを表示する。 - Suggestが表示されている場合,
検索テキストボックスで 「↓」 を押すとSuggestにフォーカスを移動する。 - Suggestを選択すると,
検索テキストボックスに選択したSuggestを設定する。 - Suggestをダブルクリックすると,
検索テキストボックスにダブルクリックしたSuggestを設定し, 検索する。 - ESCキーを押すとSuggestを閉じる。
- Suggestがない場合は何も表示しない。
Suggestデータ
Youtube APIにはSuggest用のAPIやデータは用意されていません。
今回は,