手动设置谷歌自定义搜索

发表于 2017年01月03日
前端

网站所有者经常使用谷歌自定义搜索引擎 (GCSE)搜索内容，而不是通过使用内置的搜索和/或自定义搜索功能。理由很简单--工作更少，窍门更多。如果你不需要高级过滤器或自定义搜索参数，GSCE非常适合你。

在这个快速技巧中，我将向你展示如何手动呈现搜索表单（不使用特殊的GCSE标签）和一个结果对话框，可以允许更多的控制和更整洁的方式来定义搜索输入字段风格。

问题

通常添加GCSE到网站很简单，就是复制粘贴脚本文件和一个自定义的HTML标签到网站。你在哪里放置的GCSE特殊标签，哪里就会呈现输入搜索领域。输入内容然后就这个领域就会开始谷歌搜索，是基于预先配置的参数（例如只搜索sitepoint.com）

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

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

创建一个GCSE帐户

搜索引擎完全在线配置。第一步是去GCSE网站，然后单击添加。按照向导填写您要搜索的域（通常是您的网站网址）。您现在可以忽略那些高级设置。

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

获取代码 它将指导您完成复制什么和在哪里复制，以便在您的网站上显示搜索
公开网址 将向您展示您创建的搜索的工作预览
控制面板 用于自定义搜索

转向Control Panel，点击 Search Engine ID ，为了以后记下这个值。

HTML Setup

为了将其实现，我们将创建一个基本的 index.html文件（包含所需的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>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

我们添加了两个 <div> 的特殊类，是为了被识别为应该呈现的搜索表单元素。

用于手动绘制的功能

现在打开 app.js文件并添加下面这段： file and add this:

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);
})();

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放进gcseld的配置文件。把本地索引的index.html文件的URL放到resultsUrl f字段文件中。这就是用于提供查询请求后搜索重定向的地方。此外， GCSE期望搜索结果字段能够在提供的网址上展现出来。

添加搜索表单

这项功能检查页面是否已经加载，如果已经加载，会调用函数queryAndRender(),如果还没有加载，那么会设置一个回调，以便在文档完成加载后返回这里。

queryAndRender

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

renderSearch

接下来就是见证奇迹的时刻。

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

render函数所需的参数多于此示例中提供的参数，因此如果需要进一步自定义，请务必查阅文档。 div 参数实际上使用了我们想要搜索渲染的div的ID，而tag 参数则表示我们想要渲染什么（是结果？还是搜索？或是两者同时）。

此外, renderSearch()会查找wrapper元素的数据属性，如果其存在给定的自定义函数属性，那会继续查找此函数名的作用范围，然后将给定的的属性应用到元素上，这个过程就给了我们自定义元素风格的机会。

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

window.__gcse = {

parsetags: 'explicit',

callback: renderSearchForms

};

在这段代码中，我们要修改全局范围的回调变量，这就使得GCSE加载完成后内部使用和执行回调函数时都会用到。这是解决输入域占位符（或其它）问题比 setTimeout()更好的方案的一部分。

测试运行

到目前未知，我们已经囊括了要呈现一个搜索框和结果的所有东西。如果你已经安装了node.js,转到安装文件夹找到index.html和app.js文件，然后运行http-server命令。这个命令会启动本地内容服务，默认端口号是8080。

手动设置谷歌自定义搜索

自定义函数Styling Function

现在我们准备添加自定义函数到搜索DIV上。回到index.html文件，找到#searchForm标记的DIV，然后添加自定义函数属性

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

1 2	<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";
  });
};