Code

Using Bootstrap Typeahead with Google Custom Search autocomplete

We recently implemented Google Site Search on the Guildford BC website. The site already uses Bootstrap for various UI elements so it made sense to use the Typeahead component to provide autocomplete.

First create a form. The name needs to match the variable your Google Custom Search Results control is expecting.

Then create a function to get autocomplete values using the text from the input box and return an array.

Finally, initialise Typeahead when the document is ready.