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 http://suggestqueries.google.com/complete/search?qu=qualitypoint 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.


<html>
<head>

<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)
            $(this).parent().next().find("input").val(data[1]);
    });
    
    
});

</script>
</head>

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

            <input type="text" id="q" />
            
        </p>
    </form>
        
</div>
</body>
</html>




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

Find below the content of this page.


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

$url="http://suggestqueries.google.com/complete/search?qu=".$q;
$text = file_get_contents($url); //Get content from Google suggest
$text=str_replace("window.google.ac.h([\"$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 asp.net 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 = "http://suggestqueries.google.com/complete/search?qu=" & q
    text = GetHtmlPage(url)
 
    
    junk = "window.google.ac.h([""" & q & """,[["
    
    text = Replace(text, junk, "")
    
    'Response.Write(text)
    arr_items = Split(text, "],[")
    
    For Each items In arr_items
        arr_item = Split(items, ",")
        key = arr_item(0)
        key = Replace(key, """", "")
        key = key & vbCrLf
        
        Response.Write(key)
    Next
         

 %>


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()
            sr.Close()
        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.

5 comments:

Egg said...

I recently used the autocomplete tool to populate additional fields. http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/

Alejandro Torres said...

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

Anonymous said...

$url = "http://suggestqueries.google.com/complete/search?qu=" . 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.
http://stackoverflow.com/questions/5320511/how-do-you-get-content-from-another-domain-with-load

Search This Blog