AJAX Live Search: The JavaScript File
When a user types a character in the input field above, the function showResult( ) is executed. If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function. If the input field is not empty, the showResult( ) function executes the following:
  1. Create an XMLHttpRequest object.

  2. Create the function to be executed when the server response is ready.

  3. Send the request off to a file on the server.

  4. A parameter (q) with the value of the content of the input field is added to the URL. 
function showResult( str ) {
  if ( str.length == 0 ) {
    document.getElementById("livesearch").innerHTML    = "";
    document.getElementById("livesearch").style.border = "0px";
    return;
  }
  if ( window.XMLHttpRequest ) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest( );
  }
  else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function( ) {
    if ( ( xmlhttp.readyState == 4 ) && 
         ( xmlhttp.status     == 200 ) ) {
      document.getElementById("livesearch").innerHTML =
        xmlhttp.responseText;
      document.getElementById("livesearch").style.border =
        "1px solid #A5ACB2";
    }
  }
  xmlhttp.open( "GET", "liveSearch.php?q="+str, true );
  xmlhttp.send( );
}