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 said...

We cannot access other domain urls using ajax.

Thanks for visiting our blog

twitterlinkedin YouTube subscribe

Subscribe via email

Enter your email address: