Slide 13.22: AJAX live search

AJAX Live Search

AJAX can be used to create more user-friendly and interactive searches. 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 an NBA page in the input field below:

This example consists of four pages:

a client-side simple HTML form,
a client-side JavaScript file ShowResult.js,
a server-side XML file Links.xml to store the results, and
a server-side PHP file LiveSearch.php.

The HTML Form
The example contains a simple HTML form and a link to a JavaScript. When a user types a character in the input field above, the function showResult( ) is executed. The function is triggered by the onKeyup event:

<html>
  <head><script src="ShowResult.js"></script></head>
  <body>
    <form>
      <input type="text" size="30" onKeyup="showResult(this.value)" />
      <div id="livesearch"></div>
    </form>
  </body>
</html>