02
17
Google AJAX Search APIで検索窓を設置してみる2 - タブバージョン
2008-02-17Loading
基本形のJavaScriptから赤い部分が変更されています。CSSとbody部分は基本形と同じです。
<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();
// 表示する検索の種類（ウェブ、ビデオ、ブログ、ニュース、画像、書籍）でいらない検索は削除可能です。
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GimageSearch());
searchControl.addSearcher(new GbookSearch());
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchControl"), drawOptions);
// 最初に表示する検索結果。空白の場合は初期状態で検索結果は表示されません。
searchControl.execute("");
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
タブバージョンでは検索結果が4件表示されますが、検索結果を増やすこともできます。下の赤い部分を追加すると検索結果が8件表示されます。
var searchControl = new GSearchControl(); searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); searchControl.addSearcher(new GimageSearch()); searchControl.addSearcher(new GbookSearch());
【関連記事】
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で検索窓を設置してみる
