Google Autocomplete feature from Client Side ( javascript)

Got help from I-Ching

<html>

<head>

<title>::I-Ching::</title>

<script type="text/javascript">

var g_request; // XMLHTTP request object

var g_text;

function load_return()

{

document.getElementById(

‘drpSuggestedValues’).style.display = "inline";

var str = g_text;

var start = str.indexOf("new Array");

var end = str.indexOf(", new Array", start + 1);

str = str.substring(start, end);

str = str +

";";

var test = eval(str);

//alert(test)

var myArray = new Array();

var j =1;

for(i= 0;i<test.length/2;i++)

{

myArray[i] = test[j];

j= j+2;

}

//alert(myArray)

removeAllOptions(document.getElementById(

‘drpSuggestedValues’))

for (var i=0; i < myArray.length -1 ;i++)

{

addOption(document.getElementById(

‘drpSuggestedValues’), myArray[i], myArray[i]);

}

}

function addOption(selectbox,text,value )

{

var optn = document.createElement("OPTION");

optn.text = text;

optn.value = value;

selectbox.options.add(optn);

}

function removeAllOptions(selectbox)

{

for(var i=selectbox.options.length-1;i>=0;i–)

{

selectbox.remove(i);

}

}

window.setTimeout(

"autoCompleter();", 5000);

var textOld = "";

function autoCompleter()

{

//alert(document.getElementById("txtSearch").value);

//alert(textOld);

if(document.getElementById("txtSearch").value != )

{

document.getElementById(

‘drpSuggestedValues’).style.display = "inline";

if (document.getElementById("txtSearch").value != textOld)

{

textOld = document.getElementById(

"txtSearch").value;

load_content(

true)

//alert("text changed");

}

//else alert("text is same");

}

else

{

document.getElementById(‘drpSuggestedValues’).style.display = "none";

}

window.setTimeout(

"autoCompleter();", 5000);

}

function load_content(isreading)

{

if(document.getElementById("txtSearch").value != )

{

var feedurl = "";

feedurl="http://www.google.com/complete/search?hl=en&js=true&q=&quot; + document.getElementById("txtSearch").value;

if (g_request)

{

g_request.abort();

}

if (window.XMLHttpRequest)

{

g_request =

new XMLHttpRequest();

g_request.onreadystatechange = processresponse;

g_request.open(

"GET", feedurl, true);

g_request.send(

null);

}

else // branch for IE/Windows ActiveX version

{

try

{

g_request=

new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e)

{

try

{

g_request=

new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

g_request=false;

}

}

if (g_request)

{

g_request.onreadystatechange = processresponse;

g_request.open(

"GET", feedurl, true);

g_request.send();

}

}

}

else

{

document.getElementById(‘drpSuggestedValues’).style.display = "none";

alert("Please enter the text");

}

}

// Called when the http request is finished getting list of articles

function processresponse()

{

if (g_request.readyState == 4)

{

// Success.

if (g_request.status == 200)

{

g_text = g_request.responseText;

load_return();

}

else

{

alert(

"Could not get data from server.");

}

}

}

</script>

</

head>

<

body>

<form id="myForm">

<table>

<tr>

<td>

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

</td>

<td>

<input type="button" value="Search" id="btnSearch" onclick="load_content(true);">

</td>

</tr>

<tr>

<td colspan="2">

<select id="drpSuggestedValues" size=5 runat="server" style="width:auto;display:none" onclick="sree();"></select>

</td>

</tr>

</table>

</form>

</

body>

</html>

Advertisements

About ambatisreedhar

Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s