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=" + 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>
