如何将自定义Google搜索添加到我的自定义搜索框?

时间:2016-07-30 13:52:16

标签: javascript html search-engine google-search

所以我想保留自己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搜索框。

2 个答案:

答案 0 :(得分:1)

Google支持“自定义”搜索引擎,您可以注册here,这样您就可以指定要包含在搜索中的域名(和路径)(相当于site:搜索中的参数):

Google CSE

现在,在这个例子中,我搜索了https://developer.mozilla.org,因为他们的搜索不如谷歌那么好。我将其标记为MDN,然后点击创建(在同意服务条款后):

Create the search engine for mozilla

从这里我们将获得与Get Code按钮一起使用的源代码,这将为我们提供一个要插入的HTML代码段。我看起来像这样:

<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

的自定义样式

希望这有用!

答案 1 :(得分:0)

在点击搜索按钮后的javascript中,您可以使用此链接http://www.google.it/search?q=重定向到Google搜索结果页面 您可以创建包含搜索查询的网址 例如,如果您想搜索房屋,可以重定向此页面http://www.google.it/search?q=house