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.3 The 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

results

results

Have

Figure 10.2

data

The system architecture for the

Browser

type-ahead suggest

Licensed to jonathan zheng

366

CHAPTER 10

Type-ahead suggest

10.2 The server-side framework: C#

The type-ahead suggest that we are about to tackle involves three parts: the server, the database, and the client. The database could actually be an XML file, but the same basic concept can be applied.

10.2.1 The server and the database

The server and the database code can be handled at the same time since we are just going to connect to a database of information. In this example, we will use Microsoft’s Northwind database and obtain the data from the Products table, but you can make this work for any database you want.

The idea behind the XMLHttpRequest object is to be able to send a request from the client to the server and receive back a formatted data structure. In this case, we create a text document dynamically with the data that we obtained from a database query. The text document will hold JavaScript code to create an array containing the data. You can see the steps for building the JavaScript array in listing 10.1. Listing 10.1 typeAheadData.aspx.cs

private void Page_Load(object sender,

b Initialize code

on page load

System.EventArgs e)

{

Response.ContentType = "text/html"; c

Set content type

string strQuery =

Request.Form.Get("q").ToString();

d Request form element

string strAny = "";

if (Request.Form.Get("where").ToLower()

== "true")

e Declare a

{

string

strAny = "%";

}

string strSql = "Select top 15 " +

"ProductName, " +

f Build SQL

"ProductId FROM Products