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