Auto-Completing Form Fields

A first-rate way to help your site’s visitors is to lessen the drudgery of data entry into fields. Helping them fill out forms that have a large number of choices saves them time and effort, and additionally helps provide your site with valid data.

For this example, Script 13.16 (HTML), Script 13.17 (CSS), and Script 13.18 (JavaScript) automatically show a list of U.S. states that match the letters the user types into a form field (Figure 13.7). As the user continues typing, the list shrinks until there is only one state left; this is then automatically put into the entry field, and the list goes away.

Figure 13.7. As you type, the number of possible choices narrows.

Script 13.16. This simple HTML provides the ...

Get JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.