在建议文字上单击,在搜索框上添加建议文字(例如(显示youtube的结果))

时间:2019-01-01 18:40:03

标签: javascript html google-custom-search

因此,在我的网站上,我使用Google自定义搜索引擎,当我搜索示例“ youtub”而不是“ youtube”时,它作为建议显示(显示youtube- 而是搜索youtub)或(您的意思是:youtube)

Image

所以,当我单击youtube文本时,我想在搜索框中添加它,我该怎么做?这是我的代码

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

我的问题不是很清楚,因为我找不到正确的单词!我为此感到抱歉。

2 个答案:

答案 0 :(得分:4)

请求的对youtube的新搜​​索不会直接进入用户搜索框,因为它不知道如何处理从Google返回的JSON文件。

相反,您需要实现Google自己的搜索框和searchresults组件,可以通过多种方式来实现。

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

取决于所需的整体效果。因此,例如,您需要在HTML中添加<gcse:search></gcse:search>,其余的工作由Google的API完成。

请注意,如果您要查找的是最后一个示例,则不会自动将文本替换为自动提示的文本。

就这么简单!

Custom Search JSON API中可以找到关于这一切如何组合的更详细和技术性的解释。

答案 1 :(得分:2)

解决方案!

$(document).on('click', '.gs-spelling', function(e) {
window.location.search = 'q=' + ($(this).find('i').text());
document.getElementById('searchbox').value = ($(this).find('i').text());
});
相关问题