AJAX can be used to create more user-friendly and interactive searches.

AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

  • Results are shown as you type
  • Results narrow as you continue typing
  • If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the input field below:

The results in the example above are found in an XML file (links.xml). To make this example small and simple, only six results are available.

Example Explained – The HTML Page

When a user types a character in the input field above, the function “showResult()” is executed. The function is triggered by the “onkeyup” event:

 

 



Source code explanation:


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:


    

  • Create an XMLHttpRequest object
    • 

  • Create the function to be executed when the server response is ready
    • 

  • Send the request off to a file on the server
    • 

  • Notice that a parameter (q) is added to the URL (with the content of the input field)
    • 



The PHP File


The page on the server called by the JavaScript above is a PHP file called “livesearch.php”.


The source code in “livesearch.php” searches an XML file for titles matching the search string and returns the result:


" . 
          $y->item(0)->childNodes->item(0)->nodeValue . "";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>