Refactoring 421

behavior of hiding the suggestions pop-up via a call to the hideSuggestions() method and giving the focus back to the text field so the user can continue typing.

We’ve finally completed the pop-up creation task. Now let’s concentrate on the infinitely simpler task of hiding and showing it.

Showing and hiding the pop-up

Now that we’ve developed code to handle all of the complex details of creating a pop-up list of suggestions, we need to write the code that shows and hides it. Fortunately, this is an extremely straightforward process, as any seasoned developer of DHTML like yourself knows. The showing and hiding of an element are typically done by manipulating the display property of an element’s style. This component will be no different. So without further ado, listing 10.39 contains the code that shows the pop up and the code that hides the pop-up.

Listing 10.39 Showing and hiding the suggestions pop-up

showSuggestions: function() {

var divStyle = this.suggestionsDiv.style; if ( divStyle.display == '' )

return;						Position the pop-up
this.positionSuggestionsDiv();
divStyle.display = '';				Show the pop-up
},
hideSuggestions: function() {
this.suggestionsDiv.style.display =
'none';		Hide the pop-up
},

The show and hide, as shown here, simply manipulate the style.display property of suggestionsDiv in order to show it (via an empty string value) and hide it (via none). The showSuggestions() method does the additional work of positioning the pop-up before showing it. That’s it! We mean that’s really it. Our component is done. Let’s take a few seconds to debrief.

10.5.6Refactor debriefing

This was certainly a fairly complex component with a lot of moving parts. Grand architects or not, we’ve developed a reusable component to be proud of. Our TextSuggest component handles a wide range of configuration parameters, it’s extensible, it’s server-agnostic, it’s unobtrusive, it’s cross-browser, it has a simple API for creation, it slices, it dices… Well, maybe it’s not all that, but seriously, it’s