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

最新推荐文章于 2020-05-14 13:50:21 发布

dingshi7798

最新推荐文章于 2020-05-14 13:50:21 发布

阅读量235

点赞数

文章标签： javascript ViewUI

马克·布朗（ Mark Brown ）对这篇文章进行了同行评审。感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

网站所有者通常会决定使用Google的自定义搜索引擎（GCSE）来搜索其内容，而不是使用内置和/或自定义搜索功能。原因很简单–它的工作量少得多，并且大多数情况下都能解决问题。如果您不需要高级过滤器或自定义搜索参数，那么GSCE非常适合您。

在此快速提示中，我将向您展示如何手动呈现搜索表单（不使用特殊的GCSE标记）和结果框，该框可提供更多控制权和更简洁的方式来设置搜索输入字段的样式。

问题

通常，将GCSE添加到您的网站就像将脚本和自定义HTML标签粘贴到您的网站一样简单。在放置特殊GCSE标签的位置，将显示一个输入搜索字段。在此字段中键入并开始搜索将基于先前配置的参数（例如，仅搜索sitepoint.com）进行Google搜索。

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

我们还将使用JS查询元素并更改属性，但是我们将使用GCSE提供的回调来确保输入已经加载，而不是进行盲目的setTimeout() 。

建立GCSE帐户

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

单击完成后 ，将显示三个选项：

获取代码 ，它将指导您完成复制的内容和位置，以便搜索显示在您的网站上
公开网址将向您显示您设置的搜索的有效预览
用于自定义搜索的控制面板

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

HTML设置

为了尝试这一点，我们将创建一个包含所需HTML的基本index.html和一个包含呈现和自定义搜索所需功能的app.js文件。

继续并在其中创建一个基本的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>GCSE test</h1>
    <div class="gcse-search-wrapper"></div>
    <div class="gcse-results-wrapper"></div>
    <script src="app.js"></script>
</body>
</html>

我们添加了两个带有特殊类的<div> ，以便被识别为应呈现搜索表单和结果的元素。

手动渲染功能

现在进入您的app.js文件并添加以下内容：

var config = {
  gcseId: '006267341911716099344:r_iziouh0nw',
  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) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults) {
    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](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);
})();

首先，我们为配置声明一些变量。将您之前记下的ID放入配置的gcseId字段中。将本地index.html文件的URL放入resultsUrl字段。用户提交查询后，搜索将在此处重定向。此外，GCSE将期望在提供的URL上呈现一个结果字段。

addSearchForms

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

queryAndRender

此函数在DOM中查询具有配置中提供的类的元素。如果找到包装div，则调用renderSearch()和renderResults()分别渲染搜索字段和结果字段。

renderSearch

这是真正的魔术发生的地方。

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

render函数接受的参数比本示例提供的参数多，因此，如果需要进一步的自定义，请确保检查文档。 div参数实际上获取我们要呈现搜索的div的ID，而tag参数则表示我们要呈现的确切内容（结果或搜索或两者）。

另外， renderSearch()查找wrapper元素的数据属性，如果给定了styling-function属性，它将在范围内查找该函数名称并将其应用于元素。这是我们可以样式化元素的机会。

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

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

测试运行

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

Test Run

样式功能

现在我们准备将自定义样式功能添加到搜索div中。返回index.html并在#searchForm div上添加样式功能属性

<div styling-function="removePlaceholder"
id="searchForm" class="gcse-search-wrapper"></div>

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

var removePlaceholder = function(div) {
  var inputField = div.querySelector("input.gsc-input");

  // Change the placeholder
  inputField.placeholder = "Search SitePoint";

  // Remove the background
  inputField.style.background = "none";

  // The background will get re-attached on blur, so add an event that will also remove it on blur
  // Another way to do this would be to de-attach the element from the DOM and then re-attach again, hence wiping the listeners
  inputField.addEventListener("blur", function() {
    inputField.style.background = "none";
  });
};

现在，尝试再次加载测试页，您将看到一个适当的占位符。

Voila!

结论

为了快速设置简单的搜索，尤其是在网站只是静态HTML的情况下，Google自定义搜索引擎可以完美地运行。使用少量的JavaScript，不仅可以自定义搜索表单，还可以自定义结果页面，从而为用户提供更加无缝的体验。

您正在使用GCSE，还是找到了更好的解决方案？在下面发表评论！

From: https://www.sitepoint.com/style-google-custom-search/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速提示：如何手动设置Google自定义搜索的样式

这篇文章是由同行审查马克·布朗。感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的！网站所有者往往决定使用谷歌的自定义搜索引擎（GCSE），通过他们的搜索内容，而不是使用内置和/或自定义搜索功能。原因很简单 - 这是少得多的工作，最常见它的伎俩。如果你不需要先进的过滤器或自定义搜索参数，然后GSCE是给你的。在这个快速技巧中，我将告诉你如何手动呈现搜索表单...
复制链接

扫一扫