Google Autocomplete IntelliSense

Add content-driven search suggestions to your webpages’ search box. Use the plug-and-play IntelliSense script to show

var maxSuggestions = 5;

var url = "https://suggestqueries.google.com/complete/search?client=firefox&q=";

// Function for getting JSONP.
function jsonp(uri) {
return new Promise(function (resolve, reject) {
var id = '_' + Math.round(10000 * Math.random());
var callbackName = 'jsonp_callback_' + id;
window[callbackName] = function (data) {
delete window[callbackName];
var ele = document.getElementById(id);
ele.parentNode.removeChild(ele);
resolve(data);
}

var src = uri + '&callback=' + callbackName;
var script = document.createElement('script');
script.src = src;
script.id = id;
script.addEventListener('error', reject);
(document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script)
});
}

// Sets cookie and cookie's expiration date.
function setCookie(name, value, expireIn) {
var d = new Date();
d.setTime(d.getTime() + (expireIn * 24 * 60 * 60 * 1000));
document.cookie = name + "=" + value + ";expires=" + d.toUTCString() + ";path=/;domain=" + window.location.hostname;
}

// Get's cookie's value.
function getCookie(name) {
var cookieName = name + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var cookies = decodedCookie.split(';');
for (var i = 0; i {
if (intellisnseUl.style.top !== window.scrollY + inputElement.getBoundingClientRect().bottom + "px") {
intellisnseUl.style.top = window.scrollY + inputElement.getBoundingClientRect().bottom + "px";
}

if (intellisnseUl.style.left !== window.scrollX + inputElement.getBoundingClientRect().left + "px") {
intellisnseUl.style.left = window.scrollX + inputElement.getBoundingClientRect().left + "px";
}

if (intellisnseUl.style.width !== window.getComputedStyle(inputElement).width) {
intellisnseUl.style.width = window.getComputedStyle(inputElement).width;
}

// Get google autocomplete results.
jsonp(url + e.target.value)
.then(res => res[1])
.then(res => {
// Display list.
intellisnseUl.style.display = "block";
// Remove all previous children from list.
while (intellisnseUl.firstChild) {
intellisnseUl.removeChild(intellisnseUl.firstChild);
}

// Create list of suggestions based on google results and search history.
var suggestions = searchHistory.filter(value => value.includes(e.target.value));
suggestions = suggestions.concat(res.filter(value => !suggestions.includes(value)));

// Add all suggestions to list.
for (var i = 0; i {
inputElement.value = e.target.innerHTML;
intellisnseUl.style.display = "none";
currentFocus = -1;
})

// Add suggestions to list
intellisnseUl.appendChild(listItem);
}
})
// If error, don't display list.
.catch(() => { intellisnseUl.style.display

Overview

Use this plug-and-play IntelliSense script to add Google based autocomplete combined with latest site searches onto your search inputs. Choose your search box in Twik, append this script and choose an audience (it can be everyone!) to which you wish to deliver this variant.