How to Create an Instant Search For Your Website

Google Instant has been a real success, making Google search more faster and better. Just head over to, type in some keywords in the search box and you will see the search results without having to refresh the page. Change the keywords and the search results will automatically refresh, which saves a lot of time and it’s more fun for web users.

Lately, Google implemented keyboard navigation for Google Instant which allows you to use only the keyboard to browse through different section of Google Instant.

Following the concept of Google Instant, there was a flood of instant search sites like YouTubeInstant, Bing Instant and Facebook Instant

If you have a blog or website, you can combine Google AJAX search API with a custom search engine to create a site specific Instant search. It will work much the same way as Google Instant works, allowing the user to preview search results as they type, in your website.

Site Specific Instant Search Demo

To see a site specific Instant search in action, go to this project page and type some keywords in the search box. As soon as you type a word or phrase, the instant search engine will search this blog for posts and pages that match with your search query.

The results will be shown as you type, change the search keywords and the results will refresh accordingly.

How to Set Up Instant Search On Your Website or Blog

1. Go to Google Custom search and sign in with your Google Account. Create a new custom search engine and add the site(s) which you want to include in the instant search engine you are going to create.

Create an Instant Search Engine for Your Website

There is no need to customize the search engine or tweak the CSS elements. You will only need the CSE ID of the search engine created.

2. From the control panel of the Google Custom search engine – get the unique ID, as shown below:

Get the ID of a Google Custom Search Engine

3. Go to Google Ajax Search API page and sign up for a Google AJAX search API key. Remember to enter the same URL(s) which you entered in the custom search settings.

Get the Google AJAX Search API KeyNote your Google AJAX search API key.

4. Download the Instant search source code and extract the package in your computer.

5. Open instant.js in an HTML editor or notepad. You will see two variables in the first and second line as

var AJAX_API_key = ”;
var CSE_ID = ”;

Enter the corresponding values in those fields which you obtained from step 2 and 3.

Enter Values of CSE ID and Google AJAX API Key6. Save the instant.js file and upload all the files in a directory of your website. Done !

Watch the Screencast

I have detailed all the above steps in the following screencast, check it out:

Note: The tutorial by Luiz Edurado at Woork does not uses Google CSE for the instant search. It works on WordPress blogs that run under a database.

Don't miss the Free Book

101 websites for getting things done - an informative book which will make you more productive and efficient. Subscribe to get it for free.