The client-side framework

369

Listing 10.2 Partial listing for commenting out the request lines for testing

//string strQuery = Request.Form.Get("q").ToString();

string strQuery = "a";

string strAny = "";

//if (Request.Form.Get("where").ToLower() == "true")

//{

strAny = "%";

//}

This code is looking for all the words that contain the letter a. Therefore, when this code is executed, the JavaScript array declaration appears as shown in figure 10.3.

Figure 10.3 JavaScript statement output of the server-side page for a test run As you can see, the string in figure 10.3 is correct. Therefore, we can remove the comments and hard-coded values and continue building the type-ahead suggest. You may be wondering where all the caching of the data returned from the server is. The client-side code will handle this. The only time the server will be called is for the very first keystroke or when the results are greater than or equal to 15. There is no reason to keep requesting the same data if we are only going to get a subset of the returned results. Now that we’ve finished the server-side code, let’s develop the client-side framework.

10.3 The client-side framework

The client-side framework involves Ajax’s XMLHttpRequest object and a good amount of DHTML. The first thing we tackle is building the textboxes. 10.3.1 The HTML

The HTML we’ll use is very simple since we’re dealing with only three form elements: two textboxes and a hidden field. The first textbox is the type-ahead suggest form element. The hidden field accepts the value of the selected item that Licensed to jonathan zheng

370

CHAPTER 10

Type-ahead suggest

the user picks from our type-ahead suggest. The other textbox does nothing other than keep our form from posting back to the server when the Enter key is pressed. The default action of the Enter key in a form with one text field is to submit the form. Adding another textbox to the page is the easiest way to get around the default action of the form. If you’re adding the type-ahead suggest on a page that contains multiple form elements, then you don’t need to add it. The basic HTML layout is shown in listing 10.3.

Listing 10.3 The basic HTML layout for the type-ahead suggest

In listing 10.3, we added a form with autocomplete turned off. We need to do this to prevent the browser from putting values into the fields when the page is first loaded. It is a great feature when you need it, but in this case it disrupts the flow for our type-ahead suggest. Note that this is an Internet Explorer–specific fix, to prevent the built-in autocomplete drop-downs from interfering with our DHTML

drop-down. Other browsers will ignore this attribute.

We added a textbox with the name txtUserInput, a hidden element with the name txtUserValue, and our dummy textbox with the name txtIgnore. The txtIgnore textbox, used to prevent automatic submission of the form, also has a CSS style applied to it to hide it from view, so the user cannot see it. There are other ways around this with coding, but this is the easiest and quickest solution. Now that we have added our text fields to the form, we can start coding the JavaScript.

10.3.2 The JavaScript

The JavaScript for the type-ahead suggest performs three main tasks:

■

Monitoring the user’s actions on the keyboard and mouse

■

Sending and receiving data from the server

■

Producing HTML content with which the user can interact

Before we start coding, it’s a good idea to see exactly