The client-side framework

371

Figure 10.4

The output for the type-ahead suggest

for this application

When the user types a letter, a hidden span is made visible with the information that relates to the typed letter. In figure 10.4, the highlighted letter in all of the available options is the letter a, which appears in the textbox also. The first option in the list is highlighted. By pressing the Up and Down Arrow keys, we can move this selection. Pressing the Enter key allows us to select the option. We can also select the option by clicking on one of the words from the list with the mouse. Because of the complexity of this script, the explanation may seem rather jumpy, since it involves the use of many functions to perform the type-ahead suggest. One function monitors the keystrokes, another one loads the text and JavaScript code, a third one builds the list, a fourth one underlines the typed letters, and so on. You can download the code from Manning’s website so you can follow along and look at the code in your favorite editor.

Adding the external Ajax JavaScript file

To add Ajax functionality to this application, we must include the external JavaScript file, net.js (introduced in chapter 3), in the head tag. It contains the ContentLoader object, which allows us to initiate the Ajax request without having to do all the if-else checking:

To add the external file, we add the JavaScript tag and include the src attribute that specifies the external file. We link to the file just as we would link to an image or CSS file. This file does all the work of determining how to send the information Licensed to jonathan zheng

372

CHAPTER 10

Type-ahead suggest

to the server, hiding any browser-specific code behind the easy-to-use wrapper object. This now allows us to send and retrieve the data from the server without refreshing the page. With this file attached to our project, we can start to develop the type-ahead suggest.

The output span

Figure 10.4 shows a gray box that contains all the available options. The box is an HTML span element that is dynamically positioned to line up directly under the textbox. Instead of having to add the span to the page every time we want to use this script, we can add the span to the page from the script.

In listing 10.4, we create a new span element with DOM on the page load event. We are inserting a span to the HTML page with an ID of spanOutput and a CSS

class name of spanTextDropdown. The span is then added by appending the new child element to the body element. The CSS class reference that we added allows us to assign the rules so that we can position the span dynamically. Since we are going to be dynamically positioning the span on the screen depending on where the textbox is located, we set the CSS class of the span to absolute positioning. Listing 10.4 The JavaScript code to output the positioned span

window.onload = function(){

var elemSpan = document.createElement("span");

elemSpan.id = "spanOutput";

elemSpan.className = "spanTextDropdown";

document.body.appendChild(elemSpan);

}

We are using the page onload event handler to allow us to dynamically add a span element to the page. This prevents us from having to manually add it to the page every time we want to use this script. The DOM method createElement is used to create the span. We then need to assign our new span an ID and a className attribute. Once we add those new attributes, we can append the element to the page. At this point, let’s create our CSS class (listing 10.5) so that we can dynamically position the element on the page. Listing 10.5 CSS class for drop-down span

span.spanTextDropdown{ position: absolute;

top: 0px;

left: 0px;

width: 150px;

z-index: 101;

Licensed to jonathan zheng

The client-side framework

373

background-color: #C0C0C0;

border: 1px solid #000000;

padding-left: 2px;

overflow: visible;

display: