今回はGoogle SuggestのようにHTMLフォームに打ち込まれたデータに対し予測を返す例を作ってみたいと思います。
Timeの例の時のように値を入れる欄とアウトプットを表示する欄を作成します。
<html>
<head>
<title></title>
<body>
<form>
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
現時点ではtxt1という入力欄をもったシンプルなHTMLです。イベントアトリビュートにはonkeyupイベントが起こった際に実行されるファンクションを定義します。
txtHintというスパンを作成しサーバから受信したデータを表示するために使います。
ユーザがデータを入力するとshowHint()ファンクションが実効されます。
ファンクションが実効されるためのイベントはonkeyupイベントです。
簡単に言うとユーザがデータを入力しキーボードから指を離す度にshowHintファンクションが呼び出されます。
Ajaxサジェスト（２）ではJavaScriptに実装するファンクションについて説明します。