Saturday, May 8, 2010

Implementing Google Suggest in Search box using jQuery AutoComplete plug-in

One of our Customers wants to have Auto Suggestion similar to Google search in the Search input of his website.

So, I referred this article for implementing this Google suggestion using jQuery AutoComplete plug-in.

I came to know that we can use for getting auto Suggestion from Google. But I am not sure whether it is officially supported by Google as API. Anyway it is working fine.

But I couldn't directly use the output of this suggestion in AutoComplete plug-in.

The reason is, search querystring "q" is hard-coded in the jQuery AutoComplete, but the Google suggest is using "qu" as search query string parameter.

So, I wanted to use a separate php file as proxy or bridge between them.

The code looked something similar to below one.


<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../jquery.autocomplete.js'></script>
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
<script type="text/javascript">
var keywords=['qualitypoint','qpt','quality','one','two'];
$().ready(function() {

    $("#q").autocomplete("search.php", {
        width: 260,
        selectFirst: false
    $("#q").result(function(event, data, formatted) {
        if (data)


<div id="content">
    <form autocomplete="off" >

            <input type="text" id="q" />

Here the search.php is the bridge/proxy page.

Find below the content of this page.

$q = strtolower($_GET["q"]);
if (!$q) return;

$text = file_get_contents($url); //Get content from Google suggest
$text=str_replace("[\"$q\",[[","",$text); //Remove unwanted portion
$arr_items=explode("],[",$text); //Split and put it in arrary
foreach($arr_items as $items)
{            $arr_item=explode(",",$items);
            $key=$arr_item[0]; //Get the keyword, the arrary will have other details such as no.of resutls also.
            $key=trim($key,"\""); //Use to remove quotes
        if (strpos(strtolower($key), $q) !== false) {
            echo "$key\n";

Everything was working fine in my local machine.

But it didn't work if I put the php file in different machine.

I need to put the php file in different machine only, because the customers website is in based site.

So, I am having two options now,

1. Convert the bridge page search.php into asp code. I have created this php code very easily, but I think it will take significant time/effort to convert it into asp.

2. Find a way to call the remote php file. I am not sure whether it is possible not not.

If you know any details you can share it thro' comments. And, I know the there may be some simple way to achieve this. Anyone can share the details.

Updates on May 10

Today I converted the above mentioned search.php into ASP.NET page 'search.aspx'

It looks like this,

<%@ Page Language="VB" AutoEventWireup="false" Debug="true" CodeFile="search.aspx.vb" Inherits="_Default" %>

    Dim q, url, text, junk, arr_items, items, arr_item, key
    q = Request.QueryString("q")
    If q Is DBNull.Value Then Return
    url = "" & q
    text = GetHtmlPage(url)
    junk = "[""" & q & """,[["
    text = Replace(text, junk, "")
    arr_items = Split(text, "],[")
    For Each items In arr_items
        arr_item = Split(items, ",")
        key = arr_item(0)
        key = Replace(key, """", "")
        key = key & vbCrLf


The code behind file search.aspx.vb will contain the function for getting remote web page content.

Imports System.Net
Imports System.IO
Partial Class _Default
    Inherits System.Web.UI.Page
    Shared Function GetHtmlPage(ByVal strURL As String) As String

        Dim strResult As String
        Dim objResponse As WebResponse
        Dim objRequest As WebRequest = HttpWebRequest.Create(strURL)
        objResponse = objRequest.GetResponse()
        Using sr As New StreamReader(objResponse.GetResponseStream())
            strResult = sr.ReadToEnd()
        End Using
        Return strResult
    End Function

End Class

I am not much familiar with ASP.NET Coding. So, I think there may be some simple way to achieve the same thing easily. If you know any easy and efficient approach/coding, you can share it thro' the comments.

You can find some more jQuery autocomplete tutorials and plug-ins here.

More Articles...
You can bookmark this blog for further reading, or you can subscribe to our blog feed.


Egg said...

I recently used the autocomplete tool to populate additional fields.

Alejandro Torres said...

when i use two or more words it stucks! why?

Anonymous said...

$url = "" . urlencode($q);

fixes the multi word issue.

Unknown said...

Great info. Do you know of a way to pull the autosuggest data from the Google Product Search toolbar?

Nizam and Sanandan said...

We cannot access other domain urls using ajax.

Search This Blog