on suggestion text click, add on searchbox the suggestion text ( example (Showing results for youtube))

Question

so on my website im using google custom search engine, when i search example 'youtub' not 'youtube'it shows as a suggestion (Showing results for youtube - Search instead for youtub) or (Did you mean: youtube)

so when i click on text youtube, I want to add it on my searchbox, how i can do it? this is my code

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>

my question is not very clear because I don't find the right words! im so sorry for that.

Answer 1

The requested new search for youtube won't go straight to a user search box because it won't know how to handle the JSON file returned from Google.

Instead you need to implement Google's own searchbox and searchresults components, which can be done in several ways.

Google's own tutorial on the subject, here, explains the various options, and provides links to jsFiddle samples, namely:

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

depending on the overall effect you want. So, for example, you need to add <gcse:search></gcse:search> into your HTML, and Google's API's do the rest.

Note that the last example doesn't automatically replace the text with the autosuggest text if this is what you were looking for.

And it's as simple as that!

A more detailed and technical explanation of how this all fits together can be found here: Custom Search JSON API.

Answer 2

The solution!

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