362CHAPTER 10

Type-ahead suggest

Type-ahead suggest is one of the main applications of Ajax that has helped put Ajax into the mainstream world of programming. Google Suggest amazed people as they discovered a list of choosable suggestions appearing while they were typing (and even now, several months later, it still gives a buzz). It is as if a little helper is sitting next to you and telling you what you are looking for. Some people first thought they were storing values on the page, and others thought they were using a hidden IFrame to get the data. Google was actually using the XMLHttpRequest object to obtain the values for each keystroke.

In this chapter, you’ll learn how to send Ajax requests while the user is typing. We also examine the flaws of the available type-ahead suggest implementations and find ways to avoid these pitfalls in our application. At first we take a low-level approach that is easy to understand. After we get our application functioning, we reexamine it at a higher level, and use an object-oriented approach to gain more flexibility and usability. Before we build the application, though, let’s take a quick look at some of the typical type-ahead suggest features, and how we will design our application to use the best of those features.

10.1 Examining type-ahead applications

Since Ajax has become popular, the type-ahead suggest has been one of the most sought-after pieces of code. Many people have created different versions of the type-ahead suggest that handle the interaction with the server in many ways. A lot of the solutions out there have flaws, while others go way overboard. We first evaluate some of the functionality in many type-ahead suggest applications and then take a quick look at Google Suggest. After that, we'll design our application.

10.1.1Common type-ahead suggest features

Numerous type-ahead applications are available, from basic to advanced. Each of them does the same basic thing; some have fancy interfaces with fading transition effects. If you do a search for “type-ahead suggest Ajax,” you will find plenty of examples.

If you look at a few of them, you should see that they all perform the same type of actions:

1You type a character.

2The type-ahead makes a request to the server.

3It returns data to the client.

4The client takes that data and displays the results in the table, div, textbox, or some other format.

Examining type-ahead applications	363

However, there are things that some of the scripts do not handle well. Developers need to take into consideration bandwidth, server capacity, and the client’s configuration. If you forget about these factors, Ajax may hurt your user’s experience instead of improving it.

The problems listed in table 10.1 are very common with Ajax applications.

Table 10.1 Problems with type-ahead suggest

Problem	Result
Posting back on every	Large bandwidth consumption. Imagine the server-side bandwidth required
keystroke	for 1,000 users typing 10-characters words.
Not caching data	Requests are hitting the database each time even though they are return-
	ing a subset of data they already have.
The 56K modem	Yes, there are still people who dial in, and these users may see a lag in
	response time.
Returning too many results	Not limiting the results can send too much data to the client, slowing down
	response time.
Too fancy an interface	Fancy interfaces can be bad if they take a long time to render.
Fast typists	Some people can type fast. Certain type-ahead scripts have problems if
	the user is not a hunt-and-peck typist.

Many developers tend to forget about bandwidth. Even one user who is filling in a simple word can post back a number of times. Combine this with a fast typist, and you can have more hits in a second than you normally would for the user’s entire session in a non-Ajax application.

Keeping the user interface responsive is also very important. The more time a control takes to render, the longer the user has to wait before seeing it, and the less effective the type-ahead suggest is. Delays can also be introduced by hitting the server too hard. If requests are made too frequently, or if they return too much data, the responsiveness of the user interface will suffer.

A good strategy for improving responsiveness is to cache the data on the client. (We can also cache data on the server, but that’s another issue, more familiar to developers of classic web apps.) A type-ahead suggest system will typically return fewer results as extra characters are typed, and these will often be a subset of earlier results. A simple implementation will discard previous requests and fetch all data from the server every time. A more intelligent solution might retain the results of the initial request and whittle away unwanted entries as the user types,

364CHAPTER 10

Type-ahead suggest

refreshing the user interface without going back to the server for every keystroke. This improves the application by increasing responsiveness and reducing the bandwidth. We’ll just be going through the result set that we have, making it quicker to pull the necessary information and eliminating the extra postbacks to the server.

That’s enough of the theory for now. In the next section, we’ll take a look at a production-ready implementation of the type-ahead suggest.

10.1.2Google Suggest

Some people consider Google Suggest to be the cream of the crop of the typeahead suggest applications. Google Suggest is fast and user-friendly and does its job efficiently. In figure 10.1, Google Suggest is giving suggestions for the letter e.

In figure 10.1, the result set for the letter e is limited to 10 results. Knowing the vast collection of data Google has, it could be billions of results. Google uses an algorithm to determine what should be displayed. Developers have dissected Google’s JavaScript code to figure out how it is accomplishing the task. Remember, JavaScript code cannot be completely hidden from view, although obfuscation can help.

One of the impressive things about Google Suggest is that it accounts for fast typists by using timers to limit multiple postbacks in a short span of time. This had to be one of Google’s biggest concerns since they have such a large user base. Lots of postbacks to their servers could lead to problems, and limiting the number of postbacks saves resources.

Figure 10.1 Google Suggest showing the available suggestions for the letter e

Examining type-ahead applications	365

Google has inspired us (and many others). In the next section, we’ll incorporate the best of the features we’ve reviewed as we design our own type-ahead Ajax application.

10.1.3The Ajax in Action type-ahead

The type-ahead for this application will try to limit the impact on the server as much as possible. Smaller sites cannot handle the traffic that Google, Amazon, and Yahoo! can, since they do not have fancy load-balancing and multiple servers to handle the requests. Therefore, the more bandwidth that can be saved, the cheaper it is for the smaller websites in the long run.

To do this, we use the server only when we need new data. In this application, we use a script-centric interaction between the server and the client. The server formats the results as JavaScript statements that can be executed on the client. The data returned by the server contains only the text to display to the user and any identification field we want to relate with this data. This identification field can be compared to the value or an option tag. Most scripts do not allow us to send an ID; this one allows that. Then the browser handles the returned data, as JavaScript. With the data in the form of JavaScript variables, DHTML takes its turn in the process. You can see a diagram of this process in figure 10.2.

The Ajax portion of the script, as shown in figure 10.2, allows us to grab the data from the server. The server returns a text document containing a JavaScript statement to the client. The client processes the data contained in the JavaScript statement and checks to see if there are any results. If there are, the options are displayed for the user to choose.

The concept sounds easy until you realize that a large amount of JavaScript is involved. But with a number of small steps, the process of building a type-ahead script that minimizes the impact on the server is rather simple. The easiest part of this project is the server-side code, so that’s a good place to start.

Server

Query database and process results

	Post form	Return results
Inputs	Need data
text
	Detect		Limit	Output
	keystroke	Have	results	results	Figure 10.2
Browser		data			The system architecture for the
					type-ahead suggest