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キーの方でも同じように動くみたいです。




感想

簡単だなぁ……いやこんなの常識だろっていう話なんですけどね。

jQueryのプラグインを使わずに超基礎的なものだけでやってこれなので、プラグイン使ったらもっと楽に設計できるんだろうなぁと妄想。jQueryには用途や演出ごとに様々なプラグインがあるみたいだし。

勉強しないとなー