02
18
Google AJAX Search APIで検索窓を設置してみる5 - 検索窓と結果を別に
2008-02-18Loading
上に検索窓、下に検索結果という風になります
Loading
今回はサイト内検索を設置してみました。まず、CSSはいつも通りで下記のようになっています。
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.gsc-control { width : 500px; }
</style>
JavaScriptもいつも通りAPI keyを入力してください。
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=取得したAPI key" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function OnLoad() {
var searchControl = new GSearchControl();
// 検索結果を表示するdivを指定
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere"));
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("サイト内検索");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("http://weboook.blog22.fc2.com/");
searchControl.addSearcher(siteSearch, options);
// 検索窓を表示するdivを指定
searchControl.draw(document.getElementById("searchcontrol"));
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
次にbody内の好きなところに下記のタグを挿入します。
<!-- 検索窓を表示 --> <div id="searchcontrol">Loading</div> <!-- 検索結果を表示 --> <div id="somewhere">Loading</div>
【関連記事】
Google AJAX Search APIで検索窓を設置してみる5 - 検索窓と結果を別に
Google AJAX Search APIで検索窓を設置してみる4 - サイト内検索
Google AJAX Search APIで検索窓を設置してみる3 - 検索結果の表示方法
Google AJAX Search APIで検索窓を設置してみる2 - タブバージョン
Google AJAX Search APIで検索窓を設置してみる
Google AJAX Search APIで検索窓を設置してみる5 - 検索窓と結果を別に
Google AJAX Search APIで検索窓を設置してみる4 - サイト内検索
Google AJAX Search APIで検索窓を設置してみる3 - 検索結果の表示方法
Google AJAX Search APIで検索窓を設置してみる2 - タブバージョン
Google AJAX Search APIで検索窓を設置してみる
