Google AJAX Search APIで検索窓を設置してみる5 - 検索窓と結果を別に

 今まで検索窓の下に検索結果が表示されていましたが、今回は検索窓と検索結果を別の場所に表示してみます。これを利用すると、プラグインに検索窓、メインコンテンツ内に検索結果という風なこともできます。
Loading
上に検索窓、下に検索結果という風になります
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&amp;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>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加