实现搜索框

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

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

<div class="gcse-search"></div> 元素是一个占位符 - 搜索元素（搜索框和搜索结果）将在此处呈现。

<div class="gcse-search"></div>

尝试使用不同的布局

在很多情况下，应该将搜索框与搜索结果分开显示。采用两列布局时，您可以在网页的一个区域（例如在边栏中）显示搜索框，而在另一个区域（例如网页的主区域）显示搜索结果。

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

<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> 元素正是通过这种方式确定要显示的查询结果。

试试看

下一个...

继续启用自动补全功能。