javascript - 在建议文本上单击，在搜索框中添加建议文本(示例(显示 youtube 的结果))

Question

所以在我的网站上我使用谷歌自定义搜索引擎，当我搜索示例“youtub”而不是“youtube”时，它显示为建议(显示 youtube 的结果 - 而是搜索 youtub) 或(您是说:youtube)

所以当我点击文本 youtube 时，我想将它添加到我的搜索框，我该怎么做？这是我的代码

搜索框.html

<form action="" method="GET" id="searchform">
<input required="" type="search" name="q" id="searchbox" placeholder="Search..." title="Search..." enableAutoComplete="true" autofocus/>
<button><div class="Search-Button"><img src="MYIMGHERE" class="search-png"/></div></button>
</form>

.js

<script type="text/javascript">
(function() {
var cx = '007072537540236505002:fsvzbpwgtgc';
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);
})();
var urlParams = new URLSearchParams(window.location.search);
document.getElementById('searchbox').value = urlParams.get('q');
</script>

<gcse:searchresults-only linktarget="_self"></gcse:searchresults-only>

我的问题不是很清楚，因为我没有找到合适的词!我对此感到非常抱歉。

Answer 1

要求重新搜索 youtube不会直接转到用户搜索框，因为它不知道如何处理从 Google 返回的 JSON 文件。

相反，您需要实现 Google 自己的搜索框和搜索结果组件，这可以通过多种方式完成。

Google 自己的主题教程，here ，解释了各种选项，并提供了 jsFiddle 示例的链接，即:

• <gcse:search></gcse:search>
• <gcse:searchbox></gcse:searchbox> and <gcse:searchresults></gcse:searchresults>
• <gcse:searchbox-only></gcse:searchbox-only>

取决于你想要的整体效果。因此，例如，您需要添加 <gcse:search></gcse:search>放入您的 HTML，Google 的 API 会完成剩下的工作。

请注意，如果这是您要查找的内容，最后一个示例不会自动将文本替换为自动建议文本。

就这么简单!

有关这一切如何组合在一起的更详细和技术性的解释可以在这里找到:Custom Search JSON API .