如何将自定义 Google 搜索添加到我的自定义搜索框？答案

【问题标题】：How to add custom Google search to my customized search box?如何将自定义 Google 搜索添加到我的自定义搜索框？
【发布时间】：2016-12-05 02:34:56
【问题描述】：

所以我想保留我自己的 Google 框的样式，但我想指向我页面的 Google 搜索。

代码如下所示：

<......>
</ul>
<form action="" method="post" id="FORM_10">
  <div id="DIV_11">
    <link href="css/search.css" rel="stylesheet" type="text/css"  id="LINK_12">

    <div id="DIV_14">
        <div id="DIV_15">
          <div id="DIV_16">
            <div id="DIV_17">
              <div id="DIV_18">
                <div id="DIV_19">
                  <div id="DIV_20">
                    <div id="DIV_21">
                      <input value="sdasdsad" id="INPUT_22" name="keys" size="60" maxlength="255" type="text">
                    </div>

                  </div>
                  <input id="INPUT_44" name="op" value="search" type="submit">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
   </form> <a href="#" id="A_45" title="english">en</a> <a href="#" id="A_46" title="contacts">contacts</a>
    </div>

我想以某种方式添加功能，就好像我的代码中存在gcse:search，但我想保留我自己的风格化搜索框，但是当用户将他的字符串插入搜索框时，他会得到一个弹出覆盖窗口，显示指定网站上的 Google 搜索结果。

最坏的情况。我想了解如何正确自定义 Google 搜索框。

【问题讨论】：

我使用“仅结果”CSE 选项并从我们网站上的搜索框中传递查询字符串。

标签： javascript html search-engine google-search

【解决方案1】：

Google 支持“自定义”搜索引擎，您可以注册 here，它允许您指定要包含在搜索中的域（和路径）（相当于搜索中的 site: 参数):

现在，对于这个例子，我搜索了https://developer.mozilla.org，因为他们的站内搜索不如谷歌。我将其标记为MDN，然后单击创建（同意服务条款后）：

从这里我们将获得与Get Code 按钮一起使用的源代码，这将为我们提供一个HTML sn-p 以插入。我的看起来像这样：

<script>
  (function() {
    var cx = '005381150112327209486:iwm6p6iff_4';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

将脚本插入您的<head> 并将<gcse:search> 标记放置在您希望输入出现的位置。了解这些here的自定义样式

希望这对您有所帮助！

【讨论】：

【解决方案2】：

在javascript中点击搜索按钮后，您可以使用此链接http://www.google.it/search?q=重定向到谷歌搜索结果页面您可以创建包含搜索查询的 url 例如，如果你想搜索房子，你可以重定向到这个页面http://www.google.it/search?q=house

【讨论】：

这将违反大多数浏览器的同源安全策略。见MDN