如何将 Google 搜索框添加到我的网站?
Posted
技术标签:
【中文标题】如何将 Google 搜索框添加到我的网站?【英文标题】:How can I add a Google search box to my website? 【发布时间】:2012-11-29 03:55:36 【问题描述】:我正在尝试将 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
有人有不同的解决方案吗?我做错了什么?
【问题讨论】:
【参考方案1】:很抱歉回答了一个较老的问题,但我想澄清最后一个问题。
您对表单使用“get”方法。 当您的输入字段名称为“g”时,它会生成一个如下所示的 URL:
https://www.google.com/search?g=[value from input-field]
但是当你用谷歌搜索时,你会注意到以下网址:
https://www.google.nl/search?q=google+search+bar
Google 使用“q”查询字符串变量作为搜索查询。 因此,将您的字段从“g”重命名为“q”解决了这个问题。
【讨论】:
我们能否在特定位置或特定块中获得搜索结果【参考方案2】:这是将 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 让它看起来很漂亮,这将是很棒的。谢谢! 有没有办法通过这个获得实时建议?【参考方案3】:想通了,伙计们!对于文本框的名称,您必须使用“q”。我有“g”只是为了我自己的个人喜好。但显然它必须是“q”。
有人知道为什么吗?
【讨论】:
Google 期望 'q' 作为 GET 参数并使用该值搜索互联网。q
代表“查询”,这是搜索数据库的常用术语。【参考方案4】:
无需嵌入!只需将用户发送到 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】:从 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(您必须在此处添加新的搜索引擎。此外,请关闭“搜索整个网络”选项,以便仅在您的网站上查找结果,而不是整个网络)
第三步。将此代码复制到同一页面的<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>
就是这样。
【讨论】:
以上是关于如何将 Google 搜索框添加到我的网站?的主要内容,如果未能解决你的问题,请参考以下文章
如何为您的网站添加 google chrome 多功能框搜索支持?