でも最近 jQuery を利用したライブラリが増えてきたことと、自分でも jQuery を勉強したいということで、JavaScript ON/OFF による Google Custom Search のコードの書き替えを jQuery 化してみました。

まず、HTML 側の検索フォーム部分は以下のとおりで、Google でホストされるページで表示するオリジナルのソースコードと同じです。

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="**********" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

そして、JavaScript が有効な場合にこれを書き替えるための jQuery を使った記述がこれ。

$(function(){
  $("#cse-search-box").attr("action","（検索結果を表示する URL）");
  $("#cse-search-box div").prepend("<input type='hidden' name='cof' value='FORID:11' />");
});

2行目で id="cse-search-box" が付けられた要素の action 属性を検索結果を表示するURL に書き替え、3行目で id="cse-search-box" が付けられた要素の中にある div 要素の先頭に <input type='hidden' name='cof' value='FORID:11' /> を追加しています。

これを head 要素の中で jQuery を読み込んだ後に読み込めば OK。prototype.js を使うよりさらにシンプルになりました。

なお、このブログは lightbox 等に prototype.js を使用しているため、まだ jQuery 化していません。