AJAX Suggest
AJAX is used to create more interactive applications.
For example,
When you start typing in the textbox, a JavaScript sends the letters off to a server and the server returns a list of suggestions.
It consists of three pages:
- a client-side simple HTML form,
- a client-side JavaScript file
ShowHint.js, and
- a server-side PHP file
GetHint.php.
The HTML Form
This AJAX contains a simple HTML form and a link to a JavaScript file:
<html>
<head><script src="ShowHint.js"></script></head>
<body>
<form action="">
Course: <input type="text" id="txt1" onKeyUp="showHint( this.value )" />
Suggestions: <span id="txtHint"></span>
</form>
</body>
</html>
|
As you can see, the HTML page above contains a simple HTML form with an input field called
txt1.
The form works like this:
- An event is triggered when the user presses and releases a key in the input field.
The event
onKeyup executes JavaScript code when a Keyup event occurs; that is, when the user releases a key.
- When the event is triggered, a function called
showHint is executed.
- Below the form is an element
<span> called txtHint.
This is used as a placeholder for the return data of the showHint function.