Ajax経由での検索システム作ったらエンターキー押下で検索できなかったでござるの巻

・テキストボックスと検索ボタンがある
・検索ボタン押下でテキストボックスの内容をAjaxでPHPに飛ばして検索
・PHPが取得した検索結果をJavaScriptで表示
このような検索システムの場合、テキストボックスの内容をPOSTやGETで送信する必要がないので、formタグを書く必要がない。
同様に検索ボタンはinput type="submit"ではなく、input type="button"でおｋ。
そのボタンにonlickやaddEventListenerを設定し、検索用関数を呼んでいるはず。

これはこれでいいとして、この手法の場合、formタグとPOSTを用いての検索とは大きく異なり、
テキストボックスにフォーカスがある時にエンターキーを押しても検索できない。
てことで出来るようにしてみる。

分かりやすくonclickでのサンプルソース

formタグがない初期状態

<input type="text" name="text" id="keyword" />
<input type="button" value="検索" onclick="hogeSearch();" />

これを、以下の用に修正すると

//submitされない様にhogeSearch関数が必ずfalseを返す様に戻り値を設定
<form method="post" action="" onsubmit="return hogeSearch();">
	<input type="text" name="text" id="keyword" />
	<input type="button" value="検索" onclick="hogeSearch();" />
</form>

これでエンター押下で検索できる。