How to Create an Ajax Autocomplete Text Field - Part 4
By Rob Gravelle
Digg This
Add to del.icio.us
|
In part 3 of the series, we added the brains behind our Autocomplete text field's search functionality. It handles the requests from the browser and returns whatever funds match the criteria. Now it's time to turn our attention to the Web components. We need to create six files in total:
AutocompleteSearch.jsp: The page that will contain the Autocomplete control.AutocompleteList.js: A client-side script that handles the Autocomplete control behavior.AutocompleteList.css: The CSS file that defines the appearance of the Autocomplete control list.Fund Details.jsp: A page that displays detailed information about one fund.Results.jsp: A page that displays a list of matching funds.Error.html: A page that displays a message whenever an error is encountered.
This week we'll create the CSS file, since it, along with the JavaScript file,
need to be linked to the AutocompleteSearch.jsp page.
Create the AutocompleteList.css File
To create a new CSS file, we have to right-click on the "WebContent" folder or an any item below it to access the popup menu. From there, we have to click on "Other..." because the CSS file type isn't on the "New" submenu (See Figure 1).
Surely there must be an easier way to access our Web components. There is! The "Customize Perspective" dialog has exactly what we're looking for. We can access this screen from the "Window" menu on the toolbar or from the right-click popup menu on the "Java EE" Perspective tab button in the top right-hand corner (See Figure 2).
On the "Shortcuts" tab, select the word "Web" in the "Shortcut Categories" tree to bring up the available items in the "Shortcuts" window. Don't select the checkbox because that will select everything in the "Shortcuts" pane. The items we need are: CSS, HTML, JavaScript and JSP (See Figure 3).
Now, you can access the shortcut items by selecting "New" from the toolbar (See Figure 4).
Alternatively, you can use the hotkeys "Alt+Shift+N" combination to bring up the "New" submenu directly underneath the selected folder (or the cursor, if you're working in the editing window) (See Figure 5).
Click "CSS" to open the "New Cascading Style Sheet" dialog (See Figure 6).
Enter the "File name" of "AutocompleteList.css" and click on the "Finish" button to add the new file in the WebContent folder and open the editor. We can skip the "Next" button because we don't need a particular template:
The CSS file is where we define the appearance of the Autocomplete list. In fact, CSS (Cascading Style Sheets), were created to separate appearance information from a Web page's content. That allows us to maintain each separately, much like the middle and front-end tiers decouples the logic and presentation in programs.
