AJAX - The Complete Reference

(avery) #1

378 Part II: Developing an Ajax Library^


client side. Using Ajax, we do this as we go along, and we can even fetch data incrementally
in response to user activity. In this section, we explore a number of interface components
that use Ajax to fetch data incrementally and provide a degree of immediacy impossible
during the DHTML age of JavaScript.

Auto Completion and Suggestion


One of the most well known Ajax interface improvements is the idea of auto-completion or
auto-suggestion against a very large data set using behind the scenes calls to the server.
Google Suggest is probably the most known auto-suggest type-ahead system showing you
relevant queries as you type.

The basic idea of Ajax-based auto-suggestion is that as a user types characters, Ajax is
used go to the server and filter against matches based upon the partial data. To make this
work, we need to make sure we don’t go to the server too quickly. Also, if the user outruns
the return of results by typing faster than a spawned request returns, we need to respect
that and not potentially overwrite any of their choices.

NNOT EOTE Ajax-based suggestion fetching certainly can add many more requests to a server; we also
find that much of the data that it returns may not be used.

To create the auto-suggestion type ahead, two pieces are needed: a form input box for
the user to type into and a <div> tag for any suggestions to be presented within. These
items should be bound right near each other. In our simple example there is nothing to do
to make that work other than sizing the field and <div> similarly. However, you may need
to use CSS or even resort to old-style XHTML table formatting in real use situations.

<form action="#" method="get" name="requestForm">
<label>Enter a Country:<br />
<input type="text" name="country" id="country" autocomplete="off" /><br />
<div id="suggestList"></div>
</label>
</form>

Upon page load, a keystroke handling event is bound to have it look at the character
entered and decide to make a request to get suggestions or not. Clicks must also be caught
Free download pdf