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

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.

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());
});