Use AJAX to load web page content into a DIV

Question

I have a text box. When I enter something into the text box, I want to load the material in the DIV below. What is my code equivalent:

<input type="text" onkeyup="/* I am not sure how it done, but I'll just write: */ document.getElementById('search_results').innerHTML = getContents('search.php?query='+this.value);" /><br/>
<div id="search_results"></div>

I hope you can help. Thanks in advance!

EDIT: I would appreciate it if the solution did not include the use of jQuery - if possible.

ANSWER: How do I do this:

<input type="text" onkeyup="loadSearchResults(this.value)" /><br/>
<div id="search_results"></div>

<script>
function loadSearchResults(query){

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("search_results").innerHTML=xmlhttp.responseText;
    }else if(xmlhttp.readyState>=1 && xmlhttp.status==200){
        // show the ajax loader or stuff like that...
    }
}
xmlhttp.open("GET","search.php?search="+query,true);
xmlhttp.send();

}
</script>

Answer 1

For AJAX projects, start with a library such as jQuery . He will handle a lot of work for you.

Using jQuery, the steps will look something like this:

• Use ajax command to retrieve data from your server.

  $.ajax({
    url: 'search.php',
    data: "query=search_terms",
    success: finished(data));

• div :

  
  function finished(result) {
      $('#search_results').innerHTML(result);
  }

Answer 2

- :

$("#inputid").keyup(function(evt) {
    $("#search_results").load("/getresults.php", {queryparam: evt.target.value});
});

, . , . , ? , ?

jQueryUI, , , .