1. Code
  2. Web Development

How to Add Auto Complete to Your Google Custom Search Engine

Scroll to top

This tutorial will show you how to use the "Popular Queries" feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.


Google CSE HomepageGoogle CSE HomepageGoogle CSE Homepage

Google's Custom Search Engine (CSE) allows you to create a robust search feature for your Web site. They offer a free,
ad-supported version and a premium business version that starts at $100 per year. Additionally, CSE provides a wide range of metrics, ranging from integration with
Google Analytics to a feed of popular search queries.

This tutorial will show you how to use PHP and jQuery to add an auto complete feature to CSE's default search box using the popular search queries feed as the data source.

In order to successfully use this technique on your site, you'll need your own Google CSE and a decent amount of search traffic (to ensure we have a nice set of data for
our auto complete list).

Don't worry if you don't meet all of these requirements—you can still follow along. Google often cites MacWorld's CSE implementation
as an example, so I'll be using their search feed in this tutorial. Feel free to do the same if you'd like.

Let's get started.

Step 1: Create Your Search Page

The first thing we'll do is add the CSE's default search code to a new XHTML page. You can find this by logging into your control panel and clicking "code." It will
look something like this.

Save this document in a new folder as search.html and open it in your browser. Search for something to make sure the search box works.

Google CSE Search ResultsGoogle CSE Search ResultsGoogle CSE Search Results

Step 2: Adding the jQuery Auto Complete Function

Although the jQuery UI has an auto complete function built in, you might find the
auto complete plugin
created by Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, and Jörn Zaefferer is a little easier to use. Download and unzip it.

The plugin's archive contains a variety of different scripts for many implementations. While the best practice would be to move the scripts and stylesheets we're
going to use to appropriately named folders inside of our page's root, in the interest of simplicity, let's just drag the
"jquery-autocomplete" folder into the folder our search.html is in.

The plugin comes with a demo illustrating how the auto complete could be used with city names. Let's make sure jQuery and our plugin are working properly
by hooking our Google search box up to the list of cities. In search.html, add the following inside the <head> tag.

We'll also need to slightly modify CSE's default search code by adding an id attribute to the search box. We'll call it "cse_search."

Save search.html and open it in your browser. In the search box, start typing the name of a city; you should see the autocomplete menu.

Starting to enter the name of a city will offer suggestions.

Step 3: Getting the Data Set

In the previous step, we included the "jquery-autocomplete/demo/localdata.js" script. If you open the file and look at it, you'll see a few different
JavaScript arrays. These are the arrays used to populate auto complete lists in the plugin's demo files. When we initialized jQuery and instructed the plugin
to auto complete our "cse_search" box, we also told it to get its data from the cities array:

Now we need to instruct jQuery to use our popular queries feed as its data source. But how?

We'll use a little PHP to pull in the popular queries feed, parse it, and echo out a valid JavaScript array. By including the PHP file as we would
a regular JavaScript file, it will be executed behind the scenes and the Web browser will think it's reading a static JS file.

Additionally, we're also going to supplement our popular queries feed with terms that we specify. The terms we specify here may not be searched often
enough to show up as a "popular query," but they still may be useful to have in our auto complete list. For instance, terms for which you've created
Google subscribed links or terms that monetize well with
AdSense for Search.

Create a file inside the "jquery-autocomplete" folder called searchdata.php and paste in the following:

Output of searchdata.phpOutput of searchdata.phpOutput of searchdata.php

If you're using your own CSE feed, you'll want to replace the URL on line 7. In this example, I used the overall popular queries feed for
You can use your own overall popular queries feed by going to your CSE Manage Page > Statistics >
Overall. Other available options are popular query feeds by day, week, and month.

Next, we'll need to remove the demo's localdata.js script from search.html and replace it with our searchdata.php file:

We'll also need to slightly modify our initialization code:

Now let's upload everything to the server and give search.html a shot. If everything is working like it's supposed to, your auto complete
should be working perfectly.

A working examples of the CSE RSS-powered autocomplete.

A Word on Caching

Sites that receive a significant amount of traffic may want to consider caching the search array. Having the server parse the feed
each time someone types into the search box will use a significant amount of resources. You can cache the results by replacing your
searchdata.php file with the following:

Note: The script will create the cache for the first time, but it must have write access to the directory you're
going to store it in.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.