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+")&nbsp;&nbsp;";             document.getelementbyid("search").appendchild(e.firstchild);         }      }        document.getelementbyid("search").style.border="1px solid #a5acb2";     }   }   ajaxrequest.open("get","usa_states.xml",true);   ajaxrequest.send(); } 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

order - Notification for user in user account opencart -