jQueryではじめるAjax

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

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

Suggestの実装(1)

画面要素

検索テキストボックスの下に,Suggestを表示するselect要素をid=suggestとして追加しますリスト3⁠。

リスト3 検索フォーム

<!-- 検索フォーム -->
<form id="frmSearch">
  <input type="text" id="keyword" size="35">
  <input type="submit" value="検索"><br>
  <select id="suggest" size="10"></select> <!-- Suggest -->
</form>

イベントハンドラ

検索テキストボックス

検索テキストボックスのイベントを定義しますリスト4⁠。

リスト4 検索テキストボックスイベント

// 検索テキストボックス
$("#keyword").keyup(function(e){
    if (e.keyCode == 27) {          // esc
        $("#suggest").hide();
    } else if (e.keyCode == 40) {   // ↓下矢印
        if ($("#suggest").is(":visible")) {  // suggest が表示されている
            $("#suggest").focus()[0].selectedIndex = 0;
            $(this).val($("#suggest").val());
        } else {
            yt.suggest(true);
        }
    } else {
        yt.suggest();
    }
});

このイベントハンドラのコールバック関数の引数eには,イベントオブジェクトが渡されます。 イベントオブジェクトのkeyCodeを判別し,検索テキストボックスで押下されたキーに応じて処理を振り分けています。

$("#keyword").keyup(function(e){
    if (e.keyCode == xx) {
        // xxが押下されたときの処理
        ・・・
    }
}

まず,escキー(keyCodeは27)が押下されたときの処理を実装します。 Suggestを非表示にします。

if (e.keyCode == 27) {          // esc
    $("#suggest").hide();
}

続けて,↓下矢印キー(keyCodeは40)が押下されたときの処理を実装します。 Suggestが表示されていれば,Suggestの先頭項目を選択し,選択項目の内容を検索ボックスに設定します。 Suggestが表示されていなければ,yt.suggest(true) メソッドを実行してSuggestを表示します。

} else if (e.keyCode == 40) {   // ↓下矢印
    if ($("#suggest").is(":visible")) {  // suggest が表示されている
        $("#suggest").focus()[0].selectedIndex = 0;
        $(this).val($("#suggest").val());
    } else {
        yt.suggest(true);
    }
}

それ以外のキーが押下された場合は,yt.suggest() メソッドを実行してSuggestを表示します。

} else {
    yt.suggest();
}
Suggestセレクトボックス

Suggestセレクトボックスのイベントを定義しますリスト5⁠。

リスト5 Suggestセレクトボックスイベント

// Suggestセレクトボックス
$("#suggest")
    .change(function(){
        $("#keyword").val($(this).val());
    })
    .keyup(function(e){
        if (e.keyCode == 13) {           // Enter
            $(this).hide();
            $("#frmSearch").submit();
        } else if (e.keyCode == 27) {    // Esc
            $(this).hide();
            $("#keyword").focus();
        }
    })
    .dblclick(function(){
        $(this).hide();
        $("#frmSearch").submit();
    });

Suggestセレクトボックスの選択項目が変更された場合は,選択されたキーワードを検索テキストボックスに設定します。

.change(function(){
    $("#keyword").val($(this).val());
})

Enterキー(keyCodeは13)が押下された場合は,Suggestを非表示にし,検索を実行します。

if (e.keyCode == 13) {// Enter
    $(this).hide();
    $("#frmSearch").submit();
}

escキー(keyCodeは27)が押下された場合は,Suggestを非表示にし,検索テキストボックスにフォーカスを移します。

} else if (e.keyCode == 27) {    // Esc
    $(this).hide();
    $("#keyword").focus();
}

Suggestセレクトボックスがダブルクリックされた場合は,Suggestを非表示にし,検索を実行します。

.dblclick(function(){
    $(this).hide();
    $("#frmSearch").submit();
});

初期処理

ページが読み込まれたときには,Suggestのselect要素を非表示にしますリスト6⁠。

リスト6 初期処理

// --- 初期処理 ---
// ページロード時は suggest を隠す
$("#suggest").hide();

著者プロフィール

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

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