• Choose a category
• All
• Classic-Fiction

setOptions: function(options) {

this.options = {

suggestDivClassName: 'suggestDiv',

suggestionClassName: 'suggestion',

matchClassName : 'match',

matchTextWidth : true,

selectionColor : '#b1c09c',

matchAnywhere : false,

ignoreCase : false,

count : 10

}.extend(options || {});

},

Each property in the options object that has an appropriate default value is specified here. Then, the extend() method of the Prototype library is called to override any properties specified in the options object passed in at construction time. The result is a merged options object that has the defaults and overrides specified in a single object! In the example we used here, the matchAnywhere and ignoreCase boolean properties were both overridden to values of true. The values of the configuration properties are explained in table 10.3.

Table 10.3 Values of configuration properties

Value

Explanation

suggestDivClassName

Specifies the CSS class name of the div element that will be generated to hold the suggestions.

suggestionClassName

Specifies the CSS class name of the span element that is generated for each suggestion.

matchClassName

Specifies the CSS class name of the span holding the portion of the suggestion that matches what the user has typed in. matchTextWidth

A boolean value indicating whether or not the div generated for the suggestions should size itself to match the width of the text field it is attached to. selectionColor

Specifies a hex value (or any valid value used as a CSS color specification) for the background color of the selected suggestion.

matchAnywhere

A boolean value that specifies whether the match should be looked for only at the beginning of a string or anywhere.

continued on next page

Licensed to jonathan zheng

Refactoring

401

Table 10.3 Values of configuration properties (continued)

Value

Explanation

ignoreCase

A boolean value indicating whether or not the matching should be case sensitive.

count

The maximum number of suggestions to render.

Note that there are several options that specify which CSS class names should be generated internally when building the HTML structure for the pop-up list of suggestions. Recall the configurability requirements from table 10.2: Requirement 3—Each component instance should be independently configurable, in terms of both the behavioral aspects (for example, case matching, match anywhere) and the CSS styling.

Requirement 5—The component should provide reasonable defaults for all of the configuration options.

Our code will use this configuration mechanism to provide per-instance configurability in terms of behavior (for example, case matching) as well as styling (for example, the CSS class names).

So, here at the end of day 2, we’ve made a good start on our component. With our constructor out of the way, and with a clean way to make our component highly configurable, it’s time to move on to making it Ajax aware.

10.5.3 Day 3: Ajax enabled

Let’s put some Ajax into action, shall we? A TextSuggest component without Ajax is like a burger without the beef. With no disrespect to vegetarians, it’s time for the beef. You already saw a hint of some Ajax setup when we were looking at the constructor. As you might recall, we placed a method call within the constructor called initAjax(). The initAjax() method does the setup required for the Rico Ajax support discussed earlier. Here’s the implementation:

initAjax: function(url) {

ajaxEngine.registerRequest( this.id + '_request', url );

ajaxEngine.registerAjaxObject( this.id + '_updater', this );

},

Recall that the registerRequest() method provides the Rico Ajax engine a logical name for the URLs to invoke for a given request via the sendRequest() method. Given that we have to support the requirement of having multiple suggest Licensed to jonathan zheng

402

CHAPTER 10

Type-ahead suggest

components on the same page using different URLs (but using the same ajaxEngine singleton), we need to generate a unique logical name for each.