快速提示：如何手动设计Google自定义搜索-js教程-PHP中文网

首页

web前端

js教程

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

Jennifer Aniston

Feb 17, 2025 am 09:42 AM

Quick Tip: How to Style Google Custom Search Manually

核心要点

通过手动渲染搜索表单（无需使用特殊的GCSE标签），可以手动设置Google自定义搜索引擎(GCSE)的样式，从而更好地控制搜索输入字段并使其外观更简洁。
GCSE回调函数可以确保在更改输入属性之前已加载输入。此方法比使用setTimeout方法更可靠。
Google搜索API可用于创建搜索框和结果框。如果存在活动查询，则还会创建结果框。通过查阅文档可以实现其他自定义。
可以向搜索div添加自定义样式函数以进行进一步自定义。此函数可用于更改占位符、删除背景以及添加在失焦时删除背景的事件。

本文由Mark Brown审核。感谢所有SitePoint的同行评审员，他们使SitePoint的内容达到最佳状态！

网站所有者经常选择使用Google自定义搜索引擎(GCSE)来搜索其内容，而不是使用内置和/或自定义搜索功能。原因很简单——工作量少得多，而且大多数情况下都能达到目的。如果您不需要高级筛选器或自定义搜索参数，那么GCSE适合您。

在本快速提示中，我将向您展示如何手动渲染搜索表单（无需使用特殊的GCSE标签）和结果框，这允许更精细的控制和更简洁的搜索输入字段样式设置方法。

问题

通常，将GCSE添加到您的网站就像将脚本和自定义HTML标签复制粘贴到您的网站一样简单。在您放置特殊GCSE标签的位置，将呈现一个输入搜索字段。从此字段键入并启动搜索将根据先前配置的参数执行Google搜索（例如，仅搜索sitepoint.com）。

经常出现的一个问题是“如何更改GCSE输入字段的占位符？”。不幸的是，建议的答案通常是错误的，因为它使用不可靠的setTimeout方法来等待GCSE的Ajax调用完成（确保输入已附加到DOM），然后通过JavaScript更改属性。

我们也将查询元素并使用JS更改属性，但我们将使用GCSE提供的回调函数，而不是盲目地使用setTimeout()，这将保证输入已加载。

创建GCSE帐户

搜索引擎完全在线配置。第一步是转到GCSE网站并单击“添加”。按照向导操作，填写您要搜索的域名（通常是您的网站URL）。现在您可以忽略任何高级设置。

单击“完成”后，您将看到三个选项：

“获取代码”，这将指导您完成必须复制的内容以及放置位置，以便搜索显示在您的网站上
“公共URL”将向您显示已设置搜索的工作预览
“控制面板”用于自定义搜索

转到“控制面板”，单击“搜索引擎ID”，并记下此值以备后用。

HTML设置

为了尝试一下，我们将创建一个基本的index.html，其中包含所需的HTML，以及一个包含渲染和自定义搜索所需函数的app.js文件。

继续创建一个包含以下内容的基本HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1 id="GCSE-test">GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <🎜>

</body>
</html>

我们添加了两个<div>，并使用特殊的类来识别应在其中呈现搜索表单和结果的元素。 手动渲染函数 现在进入您的app.js文件并添加以下内容： <pre class='brush:php;toolbar:false;'>var config = { gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址 searchWrapperClass: 'gcse-search-wrapper', resultsWrapperClass: 'gcse-results-wrapper' }; var renderSearchForms = function () { if (document.readyState == 'complete') { queryAndRender(); } else { google.setOnLoadCallback(function () { queryAndRender(); }, true); } }; var queryAndRender = function() { var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass); var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass); if (gsceSearchForms.length > 0) { renderSearch(gsceSearchForms[0]); } if (gsceResults.length > 0) { renderResults(gsceResults[0]); } }; var renderSearch = function (div) { google.search.cse.element.render( { div: div.id, tag: 'searchbox-only', attributes: { resultsUrl: config.resultsUrl } } ); if (div.dataset && div.dataset.stylingFunction && window[div.dataset.stylingFunction] && typeof window[div.dataset.stylingFunction] === 'function') { window[div.dataset.stylingFunction](div); // 传递div而不是form } }; var renderResults = function(div) { google.search.cse.element.render( { div: div.id, tag: 'searchresults-only' }); }; window.__gcse = { parsetags: 'explicit', callback: renderSearchForms }; (function () { var cx = config.gcseId; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </pre> 首先，我们声明一些用于配置的变量。将您之前记下的ID放入config的<code>gcseId字段中。将本地index.html文件的URL放入resultsUrl字段中。这是用户提交查询后搜索将重定向到的位置。此外，GCSE将期望在提供的URL上呈现结果字段。

renderSearchForms函数检查页面是否已加载，如果已加载，则调用将负责渲染queryAndRender()的函数；或者，如果文档尚未加载，则设置回调函数，以便稍后在文档加载完成后返回此处。

queryAndRender函数查询具有在config中提供的类的元素的DOM。如果找到包装器div，则分别调用renderSearch()和renderResults()来呈现搜索和结果字段。

renderSearch函数是实际的魔法发生的地方。

我们使用Google搜索API（此处有关如何使用google.search.cse.element对象的更多文档）来创建搜索框，如果存在活动查询（结果），则创建结果框。

render函数接受比此示例中提供的更多参数，因此如果需要进一步自定义，请务必检查文档。div参数实际上接受我们要渲染搜索的div的ID，tag参数表示我们究竟要渲染什么（results或search或两者）。

此外，renderSearch()查找包装器元素的数据属性，如果给出了styling-function属性，它将查找作用域中的函数名称并将其应用于元素。这是我们可以设置元素样式的机会。

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

在此代码片段中，我们在全局作用域中设置了一个回调变量，以便GCSE在内部使用此变量并在加载完成后执行回调函数。这使得此方法比使用setTimeout()解决方案来编辑输入字段的占位符（或任何其他内容）好得多。

测试运行

到目前为止，我们已经包含了渲染搜索框和结果所需的一切。如果您已安装node.js，请进入放置index.html和app.js文件的文件夹，然后运行http-server命令。默认情况下，这将在localhost上的端口8080上提供文件夹中的内容。

Quick Tip: How to Style Google Custom Search Manually

样式函数

现在我们准备向搜索div添加自定义样式函数。返回index.html，并在#searchForm div上添加一个styling-function属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1 id="GCSE-test">GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <🎜>

</body>
</html>

现在进入app.js，在文件的顶部，在config变量声明下，添加一个新函数：

var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 传递div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();

现在尝试再次加载测试页面，您将看到正确的占位符。

Quick Tip: How to Style Google Custom Search Manually

结论

对于快速设置简单的搜索，尤其是在网站只是静态HTML的情况下，Google自定义搜索引擎非常有效。只需少量JavaScript代码，就可以自定义搜索表单和结果页面，为用户提供更无缝的体验。

您是否正在使用GCSE，或者您是否找到了更好的解决方案？请在下方评论！

关于设置Google自定义搜索样式的常见问题解答(FAQ)

如何自定义Google自定义搜索引擎的外观？

自定义Google自定义搜索引擎的外观涉及使用CSS（层叠样式表）。CSS是一种样式表语言，用于描述以HTML编写的文档的外观和格式。您可以更改搜索引擎的颜色、字体、大小和其他元素。为此，您需要访问可编程搜索元素控制API，该API允许您自定义搜索元素。然后，您可以将CSS添加到正确的部分以更改搜索引擎的外观。

我可以将Google自定义搜索添加到我的网站吗？

是的，您可以将Google自定义搜索添加到您的网站。Google提供了一个自定义搜索JSON API，您可以使用它来发送GET请求。此API以JSON格式返回搜索结果。然后，您可以使用这些结果在您的网站上创建自定义搜索引擎。这允许您的用户搜索您的网站或您指定的其他网站。

如何使用Google自定义搜索实现搜索框？

使用Google自定义搜索实现搜索框涉及创建搜索引擎ID，您可以在可编程搜索引擎网站上执行此操作。获得ID后，您可以使用自定义搜索元素控制API来创建搜索框。然后，您可以使用CSS自定义此搜索框。

什么是可编程搜索元素控制API？

可编程搜索元素控制API是由Google提供的一组函数，允许您自定义可编程搜索引擎。这包括创建搜索框、自定义搜索引擎的外观以及控制搜索结果。

如何控制Google自定义搜索中的搜索结果？

您可以使用可编程搜索元素控制API控制Google自定义搜索中的搜索结果。此API提供允许您指定搜索的网站、返回的结果数量以及显示结果的顺序的函数。

我可以将Google自定义搜索用于商业用途吗？

是的，您可以将Google自定义搜索用于商业用途。但是，您需要了解服务条款。例如，您不能使用搜索引擎来显示成人内容或宣传非法活动。

如何更改Google自定义搜索中搜索结果的颜色？

您可以使用CSS更改Google自定义搜索中搜索结果的颜色。您需要访问可编程搜索元素控制API并将CSS添加到正确的部分。您可以更改文本、背景和其他搜索结果元素的颜色。

我可以在移动设备上使用Google自定义搜索吗？

是的，您可以在移动设备上使用Google自定义搜索。可编程搜索引擎设计为响应式，这意味着它将调整以适应其正在查看的设备的屏幕尺寸。您还可以使用CSS自定义搜索引擎的外观，使其更适合移动设备。

如何在我的Google自定义搜索引擎中添加徽标？

您可以使用CSS在我的Google自定义搜索引擎中添加徽标。您需要访问可编程搜索元素控制API并将CSS添加到正确的部分。然后，您可以添加一个图像URL以显示为您的徽标。

我可以在没有编码知识的情况下使用Google自定义搜索吗？

虽然可以在没有编码知识的情况下使用Google自定义搜索，但建议您对HTML和CSS有一定的了解，以便充分自定义搜索引擎。但是，Google提供了详细的文档和教程来帮助您入门。

以上是快速提示：如何手动设计Google自定义搜索的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr