快速提示：如何手动设计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中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10张移动秘籍用于移动开发Mar 05, 2025 am 12:43 AM

该帖子编写了有用的作弊表，参考指南，快速食谱以及用于Android，BlackBerry和iPhone应用程序开发的代码片段。没有开发人员应该没有他们！触摸手势参考指南（PDF） Desig的宝贵资源

通过来源查看器提高您的jQuery知识Mar 05, 2025 am 12:54 AM

jQuery是一个很棒的JavaScript框架。但是，与任何图书馆一样，有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误，或者只是对jQuery如何实现特定UI感到好奇

10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏游戏编程的“Hello world”，现在有了jQuery版本。源码 jQuery疯狂填词游戏这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。源码 jQuery扫雷游戏