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 Google.com, 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.
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.
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:
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.
Note 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 CSE_ID = ”;
Enter the corresponding values in those fields which you obtained from step 2 and 3.
6. 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: