CODEWITHSUNDEEP
javascripthtmlajax
daniilcul8r
daniilcul8r

Reputation: 23

AJAX Predictive Search

I have a basic HTML form that I want to fill in with the names of the US states. I have all of 50 of them (Alabama to Wyoming) stored in the 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 some AJAX for 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 it still does not work. Suggestions? What am I doing wrong?

Upvotes: 1

Views: 1107

Answers (1)

Abhishek Pachal
Abhishek Pachal

Reputation: 554

You might be looking for this.Replace your javascript code with 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();
}

Upvotes: 1

Related Questions