实现搜索框

创建可编程搜索引擎后，您即可向自己的网站添加可编程搜索元素。为此，您需要复制一些代码，并将其粘贴到您希望显示搜索引擎的网站 HTML 中。

  1. 在控制面板中，点击要使用的搜索引擎。
  2. 在概览页面的基本部分中，点击获取代码。 复制该代码，并将其粘贴到网页的 HTML 源代码中您希望显示可编程搜索元素的位置。

<div class="gcse-search"></div> 元素是一个占位符，用于呈现搜索元素（搜索框和搜索结果）的位置。

<!-- 在此处插入您自己的可编程搜索引擎 ID --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

尝试使用不同的布局

在许多情况下，搜索框独立于搜索结果显示，是比较合理的。通过两列布局，您可以在网页的某个区域（例如边栏）中呈现搜索框，并在另一区域（例如网页的主要区域）中显示搜索结果。

若要更改引擎的布局，请前往控制面板中外观和风格页面的布局部分。在控制台中选择并保存 2 列布局后，您还需要更改搜索元素的 HTML 代码。

<!-- 在此处插入您自己的可编程搜索引擎 ID --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<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>

另一种有趣的布局是双页选项。它允许您在一个网页上实现自己的搜索框，并使用地址栏中的参数在另一个网页上呈现标准搜索结果。

在控制台中选择并保存双页版式。在一个网页上，实现一个独立的搜索框，将 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> 元素正是通过这种方式知道要显示哪些查询结果。

试试看

下一个...

继续启用自动补全功能。