There are all too many web forms that requiring filling in contact information. I believe the state dropdown is one of those gems that everybody has a snippet of code in their stockpile. The annoyance of having to go out and search for a state array or database to populate the dropdown is far too great. I had an aha moment this morning…

The two most popular solutions for a user entering their state are to either make a free form text field with a max length of 2 or provide all states in a neat little dropdown in ascending order. Both solutions have their caveats. The problem with the free form text field is that it is prone to user error. The problem with the dropdown is that although it’s autocompletion is not ideal; only savvy users might fully understand it’s capabilities of using a sequence of keys for matching. This is where jQuery autocompletion comes into play.

The Benefits

It gives the user the option of using a free form text tool or a dropdown. The autocompletion suggestions are limited to only the characters already entered, giving the user a limited set of choices for rapid scanning. The states are already pre-filled and the work is done for you if you use this code. It degrades gracefully, providing a default state dropdown in the event the user doesn’t have javascript enabled. You can custom style it. Either provide a jQuery UI css include or write your own. I would personally suggest adding something dropdown-esque to the text input to give a visual indication of it’s usage. Matching on partial state names with a preference of two-digit state codes.

The Drawbacks

It requires the user to have javascript enabled for nifty functionality. The jQuery library is required. This could be a blessing or a curse depending on the website you are working on.

You can view a minimalist live demo of the state dropdown functionality here at JS Bin. To view the full source and play with this demo yourself, click on the Edit button in the upper right hand corner of the demo.

The Meat & Bones (JavaScript)

gist

It Needs Your Help

This demo needs some TLC in the design department. If you feel so inclined, modify your own version on JS Bin and post the link in the comments section to give people a more suitable demo.

There are all too many web forms that requiring filling in contact information. I believe the state dropdown is one of those gems that everybody has a snippet of code in their stockpile. The annoyance of having to go out and search for a state array or database to populate the dropdown is far too great. I had an aha moment this morning…