jQueryで作るAjaxな検索フォーム（テスト）

技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。

サンプル

表題のフォームというのはこんな感じのです。

#sampleSearchResult a { border: none !important }

仕様

検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する
「クリア」を押すと検索語句と検索結果を削除する
検索語句入力欄でリターンキーを押しても検索を開始する

検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する

HTML: フォーム部分

JavaScript: 検索部分

function sampleSearchFilckr () {
var word = $('#sampleSearchWord').val();
if(!word) {
alert('検索語を入力してください');
return false;
}
//検索
$.post(
'/sample/flickr',
{"q": word},
function(data, status) {
//searchに成功したら結果を表示する
$('#sampleSearchResult').html(data);
},
"html"
);
}

「$.post()」の部分がAjaxによるHTTP通信。仕様はこの辺を参考に。「$.ajax()」のラッパーらしいです。

jQuery.post() — jQuery API

「クリア」を押すと検索語句と検索結果を削除する

HTML: フォーム部分

JavaScript: クリア部分

function sampleSearchClear () {
$('#sampleSearchWord').val('');
$('#sampleSearchResult').html('');
}

削除と言うより、空要素を挿入という方が正しいですが。

検索語句入力欄でリターンキーを押しても検索を開始する

HTML: フォーム部分

JavaScript: キーが押されたことをキャッチ

$(function() {
$('#sampleSearchWord').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
sampleSearchFilckr();
}
});
});

「13」というのがリターンキーですね。10キーの方でも同じように動くみたいです。