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:
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/
when i use two or more words it stucks! why?
$url = "http://suggestqueries.google.com/complete/search?qu=" . urlencode($q);
fixes the multi word issue.
Great info. Do you know of a way to pull the autosuggest data from the Google Product Search toolbar?
We cannot access other domain urls using ajax.
http://stackoverflow.com/questions/5320511/how-do-you-get-content-from-another-domain-with-load
Post a Comment