検索ボックスの実装

プログラム可能検索エンジンを作成したら、プログラム可能検索要素をサイトに追加できます。これを行うには、コードをコピーして、検索エンジンを表示するサイトの HTML に貼り付ける必要があります。

  1. コントロール パネルで、使用する検索エンジンをクリックします。
  2. [概要] ページの [基本] セクションで、[コードを取得] をクリックします。 コードをコピーして、ページの HTML ソースコード内の、プログラム可能検索要素を表示する場所に貼り付けます。

<div class="gcse-search"></div> 要素はプレースホルダです。ここに検索要素（検索ボックスと検索結果の両方）が表示されます。

<!-- ご自身のプログラム可能検索エンジン ID をここに挿入 --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

さまざまなレイアウトを試す

多くの場合、検索結果とは別に検索ボックスを表示するほうが合理的です。2 列レイアウトでは、ページの 1 つの領域（サイドバーなど）に検索ボックスを表示し、別の領域（ページのメイン領域など）に検索結果を表示できます。

エンジンのレイアウトを変更するには、[コントロール パネル] の [デザイン] ページの [レイアウト] セクションに移動します。コントロール パネルで 2 列のレイアウトを選択して保存したら、検索要素の HTML コードも変更する必要があります。

<!-- ご自身のプログラム可能検索エンジン ID をここに挿入 --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

もう 1 つの興味深いレイアウトは、2 ページを使用するオプションです。あるページに独自の検索ボックスを実装し、アドレスバーのパラメータを使用して標準の検索結果を別のページに表示できます。

コントロール パネルで [2 ページ レイアウト] を選択して保存します。あるページにスタンドアロンの検索ボックスを実装し、結果を表示する URL を指すように resultsUrl 属性を変更します。

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

試してみる

スタンドアロンの検索結果ページを実装するには、結果コード スニペットを結果ページに貼り付けます。

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

「q」を渡すことで、このページの検索結果を表示できるようになりました引数:

https://my-results-page-url.com/?q=myQuery

アドレスバーに q=myQuery というパラメータが含まれていることに注意してください。これにより、<div class="gcse-searchresults-only"></div> 要素はこれにより表示されるクエリ結果が決定されます。

試してみる

次のステップ

予測入力を有効にするに進みます。