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

サンプル

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






仕様

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


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

HTML: フォーム部分

<input type="text" id="sampleSearchWord" style="padding:5px;" value="鰻" />
<button onClick="sampleSearchFilckr()">Flickrで検索する</button>
<div id="sampleSearchResult"></div>

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: フォーム部分

<input type="text" id="sampleSearchWord" style="padding:5px;" value="鰻" />
<button onClick="sampleSearchClear()">クリア</button>
<div id="sampleSearchResult"></div>

JavaScript: クリア部分

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

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



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

HTML: フォーム部分

<input type="text" id="sampleSearchWord" style="padding:5px;" value="鰻" />

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

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

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




感想

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

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

勉強しないとなー