快速提示：如何手动设置 Google 自定义搜索样式

huma13453

本文由马克·布朗 (Mark Brown)进行同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ Play Next Unmute Current Time 0:06 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 网站所有者经常决定使用 Google 的自定义搜索引擎(GCSE) 来搜索这就是真正的魔法发生的地方其内容，而不是使用内置和/或自定义搜索功能。原因很简单——工作量少得多，而且大多数情况下都能达到目的。如果您不需要高级过滤器或自定义搜索参数，那么 GSCE 适合您。 在这个快速提示中，我将向您展示如何手动呈现搜索表单（不使用特殊的 GCSE 标签）和结果框，该结果框允许更多控制和更清晰的方式来设置搜索输入字段的样式。 问题 通常，将 GCSE 添加到您的网站就像将脚本和自定义 HTML 标签复制粘贴到您的网站一样简单。在放置特殊 GCSE 标签的地方，将呈现一个输入搜索字段。


在此字段中键入并开始搜索将根据先前配置的参数进行 Google 搜索。 经常出现的一个问题是“如何更改 GCSE 输入字段的占位符？”。不幸的是，建议的答案经常是错误的，因为它使用不可靠的setTimeout方法来等待 GCSE 的 Ajax 调用完成（确保输入已经附加到 DOM），然后 富人人数数据 通过 JavaScript 更改属性。 Learn to Code with JavaScript 我们还将使用 JS 查询元素并更改属性，但setTimeout()我们不会盲目执行，而是使用 GCSE 提供的回调，这将保证输入已加载。 创建 GCSE 帐户 搜索引擎完全在线配置。第一步是访问GCSE 网站并点击添加。按照向导填写您要搜索的域（通常是您的站点 URL）。您现在可以忽略任何高级设置。 单击完成后，您将看到三个选项： 获取代码，它将指导您了解必须复制的内容和位置，以便搜索结果显示在您的网站上 公共 URL将向您显示您设置的搜索的工作预览 用于自定义搜索的控制面板 转到“控制面板”，单击“搜索引擎 ID”并记下该值以供稍后使用。



这是用户提交查询后搜索将重定向的位置。此外，GCSE 期望在提供的 URL 上呈现一个结果字段。 添加搜索表单 此函数检查页面是否已加载，如果已加载，则调用负责渲染的函数queryAndRender()，或者如果文档尚未加载，则设置回调以便稍后在文档加载完成后返回此处。 查询和渲染 此函数在 DOM 中查询具有配置中提供的类的元素。如果找到包装器 div，则调用renderSearch()和renderResults()分别渲染搜索和结果字段。 渲染搜索 Learn to Code with JavaScript 。 我们使用 Google 搜索 API（有关如何使用google.search.cse.element对象的更多文档，请参见此处）来创建搜索框，如果有活动查询（结果），则创建结果框。 渲染函数接受的参数比本示例中提供的参数多，因此如果需要进一步自定义，请务必检查文档。该div参数实际上采用我们想要呈现搜索的 div 的 ID，并且该tag参数表示我们到底想要呈现什么（结果或搜索或两者）。