AJAX Suggest: The JavaScript File
Start typing a course in the input field:

Suggestions:
This page includes a link to a JavaScript page 
<script src="ShowHint.js"></script>
which contains a function showHint as below. If the input field is empty (str.length==0), the function clears the content of the txtHint placeholder and exits the function. If the input field is not empty, the showHint 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 content of the input field is added to the URL.
view source
print?
01function showHint( str ) {
02  if ( str.length == 0 ) {
03    document.GetElementById("txtHint").innerHTML = "";
04    return;
05  }
06  if ( window.XMLHttpRequest ) {
07    // code for IE7+, Firefox, Chrome, Opera, Safari
08    xmlhttp = new XMLHttpRequest( );
09  }
10  else {
11    // code for IE6, IE5
12    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
13  }
14  xmlhttp.onreadystatechange = function( ) {
15    if ( ( xmlhttp.readyState == 4 ) &&
16         ( xmlhttp.status     == 200 ) ) {
17      document.GetElementById("txtHint").innerHTML =
18        xmlhttp.responseText;
19    }
20  }
21  xmlhttp.open( "GET", "GetHint.php?q="+str, true );
22  xmlhttp.send( );
23}