この記事は 1 年 7 ヶ月 18 日 前に書かれたものです。最新の情報とは異なる場合がありますのでご注意ください。
Google Custom Search の iframe で表示させる方法は、JavaScript を無効にされている環境では検索結果が表示されません。そこで JavaScript が有効な環境では iframe 方式で、JavaScript が無効な環境では Google でホストされるページで検索結果を表示させる手段として、これまで prototype.js を使った方法を、サイト制作の中で使ってきました。
でも最近 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 化していません。
Recent Comments