javascript - AJAX Predictive Search -
i have basic html form want fill in names of states. have of 50 of them (alabama wyoming) stored in following format:
<?xml version="1.0"?> <states xml:lang="en"> <item> <label>alabama</label> <value>al</value> </item> <item> <label>alaska</label> <value>ak</value> </item> ...
i wrote ajax this:
function ajaxfunction(str) { if (str.length==0) { document.getelementbyid("search").innerhtml=""; document.getelementbyid("search").style.border="0px"; return; } var ajaxrequest = new xmlhttprequest(); ajaxrequest.onreadystatechange = function() { if (ajaxrequest.readystate==4 && ajaxrequest.status==200) { document.getelementbyid("search").innerhtml=ajaxrequest.responsetext; document.getelementbyid("search").style.border="1px solid #a5acb2"; } } ajaxrequest.open("get","usa_states.xml",true); ajaxrequest.send(); }
html:
<form id = "form1"> <input onkeyup="ajaxfunction(this.value);" type = "text" size = "30" id = "text1" autocomplete="off"/> <div id = "search">
and still not work. suggestions? doing wrong?
you might looking this.replace javascript code this.
function ajaxfunction(str) { if (str.length==0) { document.getelementbyid("search").innerhtml=""; document.getelementbyid("search").style.border="0px"; return; } var input=document.getelementbyid('text1').value; var ajaxrequest = new xmlhttprequest(); ajaxrequest.onreadystatechange = function() { if (ajaxrequest.readystate==4 && ajaxrequest.status==200) { var res=ajaxrequest.responsexml; var states=res.getelementsbytagname("states"); var elem=states[0]; var items=res.getelementsbytagname("item"); document.getelementbyid("search").innerhtml=""; for(var i=0;i<items.length;i++){ var item=items[i].getelementsbytagname("label"); var state=item[0].innerhtml; var len=str.length; var match=state.substr(0,len); if(match.touppercase()==input.touppercase()){ var val=items[i].getelementsbytagname("value"); var value=val[0].innerhtml; var e = document.createelement('span'); e.innerhtml = state+"("+value+") "; document.getelementbyid("search").appendchild(e.firstchild); } } document.getelementbyid("search").style.border="1px solid #a5acb2"; } } ajaxrequest.open("get","usa_states.xml",true); ajaxrequest.send(); }
Comments
Post a Comment