How to Create an Ajax Autocomplete Text Field - Part 6 / Page 3 | WebReference

How to Create an Ajax Autocomplete Text Field - Part 6 / Page 3


[prev]

How to Create an Ajax Autocomplete Text Field - Part 6 [con't]

Run the Web App

It's time to try our Autocomplete control out!

Right-click on the AutocompleteSearch.jsp file in the "Project Explorer" pane and select "Run As => 1 Run on Server" from the popup menu (See Figure 6).

After a few seconds, the AutocompleteSearch page should appear in the main Eclipse window (See Figure 7).

Type an "s" in the text field and hover the mouse pointer over a list item (See Figure 8).

Eclipse also provides the option of viewing the Web Application in a browser of your choice (See Figure 9).

If, for whatever reason your page doesn't behave correctly, have no fear; Eclipse has all of the debugging features that you'd expect from a full-fledged IDE. Use the "Debug As..." item in the popup menu immediately under "Run As..." to start the server up in debug mode (See Figure 10)

Under most circumstances, you can simply save whatever file that you modified and refresh the browser to see your changes, rather than go through the "Run As" menu.

Here's a ZIP file containing all the files that we worked on today.

We've covered a lot of ground in the past six weeks. Give yourself a well-deserved pat on the back for a job well done. Now that we've got a working prototype of our Autocomplete text field, we're ready to promote it to a true control by decoupling it from the search page and adding some additional CSS formatting and functionality, such as a scrollbar, search text highlighting, appearance enhancements and arrow keys support.

References

Original: May 15, 2008

Digg This Add to del.icio.us


[prev]