如何在我的网站上添加Google搜索框?

时间:2012-12-11 15:19:46

标签: html google-search

我正在尝试将Google搜索框添加到我自己的网站。我想搜索谷歌本身,而不是我的网站。有一些代码我用它来工作,但不再有:

<form method="get" action="https://www.google.com/search">
<input type="text" name="g" size="31" value="">
</form>

当我尝试进行搜索时,它只会指向Google主页。嗯,实际上它指向这里:https://www.google.com/webhp

有没有人有不同的解决方案?我做错了什么?

6 个答案:

答案 0 :(得分:21)

很抱歉回复一个较旧的问题,但我想澄清最后一个问题。

您为表单使用“get”方法。 当输入字段的名称为“g”时,它将生成如下URL:

https://www.google.com/search?g=[value from input-field]

但是当您使用Google搜索时,您会注意到以下网址:

https://www.google.nl/search?q=google+search+bar

Google使用“q”Querystring变量作为搜索查询。 因此,将您的字段从“g”重命名为“q”解决了这个问题。

答案 1 :(得分:13)

这是将Google网站搜索添加到网站的方式之一:

&#13;
&#13;
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required"  type="text">
<button class="button" type="submit">Search</button>
</form>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

答案 3 :(得分:1)

想出来,大家好!对于文本框的NAME,您必须使用“q”。我只是为了个人喜好而拥有“g”。但显然它必须是“q”。

任何人都知道为什么?

答案 4 :(得分:0)

无需嵌入!只需将用户发送到google,然后在搜索中添加var即可,如下所示:(请记住,代码对此可能无效,因此请尝试在浏览器中进行操作。) 希望它能起作用!

<textarea id="Blah"></textarea><button onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("Blah").value;
location.replace("https://www.google.com/search?q=" + Blah + "");
}
</script>

    function search() {
    var Blah = document.getElementById("Blah").value;
    location.replace("https://www.google.com/search?q=" + Blah + "");
    }
<textarea id="Blah"></textarea><button onclick="search()">Search</button>

答案 5 :(得分:0)

从 2021 年 3 月 13 日起。我为我的网站制作了这个非常简单的代码https://neculaifantanaru.com/en/how-can-i-integrate-google-search-box-to-my-website-by-implementing-custom-code.html

第一步。这是搜索框。将此代码复制到 html/php 页面中所需的位置。人们会在这里搜索信息。此表单会将搜索结果发送到另一个名为 search.html

的 html 页面
    <form action="https://YOUR-WEBSITE.com/search.html" method="get" id="site-search">
        <fieldset>
            <!-- <label for="search">Search in website</label> -->
            <input type="text" name="q" id="q" value="" />
            <button type="submit" class="btn btn-inverse">search</button>
        </fieldset>
    </form>

第二步。 创建一个名为 search.html 的新 html 页面。并在 <head> 部分中添加此代码,更有可能在 </head> 之前:

<script>
  (function() {
    var cx = 'YOUR-NUMBER-CODE';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

您可以从此链接获得您的号码代码 https://cse.google.com/cse/all(在这里您必须添加您的新搜索引擎。此外,将“搜索整个网络”选项设为 OFF,以便仅在您的网站,而不是整个网站)

第三步。在同一页面的 <body> 部分复制此代码:search.html

<div class="main-content">
<h1>Search the site</h1><p>If you want to search for our articles on a specific topic, write the search term in the form below.</p>

<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>
</div>

仅此而已。