如何将Google搜索框添加到我的网站?

29

我正在尝试在我的网站上添加一个Google搜索框。我希望它搜索的是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

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

5个回答

27

抱歉在旧问题上回复,但我想澄清最后一个问题。

你在表单中使用了"get"方法。 当你的输入字段名称为"g"时,它会生成如下URL:

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

但是当您使用谷歌搜索时,您会注意到以下URL:

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

谷歌使用“q”作为查询字符串变量进行搜索。因此,将您的字段从“g”重命名为“q”即可解决问题。


我们可以在特定位置或特定块中获得搜索结果吗? - shashi verma

19

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

<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>


太棒了!谢谢你。我正在为我的本地Web服务器制作一个起始页,所以一旦我用CSS让它看起来漂亮,这将非常好。谢谢! - Caleb Hawn
有没有办法通过这个获取实时建议? - GodsDead

1
搞定了,伙计们!对于文本框的名称,你必须使用“q”。我之前用的是“g”,只是出于个人喜好。但显然必须是“q”。
有人知道为什么吗?

1
谷歌期望一个名为“q”的GET参数,并使用该值搜索互联网。 - Theo
2
“q”代表“查询”,这是搜索数据库的常用术语。 - Alexis Wilke

1
你的代码无法工作的原因是GET请求名称现在是“q”,而不是“g”。
我建议使用以下两种方法之一:
方法1:直接向Google发送GET请求(最佳和最简单的选项)。
<form method="GET" action="https://www.google.com/search">
    <input name="q" type="text">
    <input type="submit">
</form>

另一个(更复杂)的答案是

方法二:使用JS重定向到Google

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

希望这可以帮到你!

-1

从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 获取 YOUR-NUMBER-CODE(在此处添加您的新搜索引擎...另外,打开“仅在网站上搜索”选项,以便仅在您的网站上查找结果,而不是整个网络)

第三步。 将此代码复制到同一页面上的<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>

就是这样。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接