jQuery AutoSuggest or Dropdown for Data Input

Question

We are working on an improvement to a project that requires users to enter their state, city, and street to get a result back based off what they entered. The current model asks users to freeform type their state, city, and street into a text field, which often results in faulty data due to typing error.

To improve the quality of data we collect, we want to implement a system that allows users to select their state, city, and street from our database instead of them entering the information freeform. The selections would be progressively filtered, i.e. after the user inputs their state, the cities are filtered so that selections only include those in the selected state, and same with streets depending on city+state. The catch is that our database is not exhaustive, but we are constantly updating. This means some users' cities and/or streets won't be listed as a selection.

In a usability test, we vetted two options: dropdown menus and jQuery autosuggest. Unfortunately, neither proved to be optimal:

Autosuggest pros

• Allows users to input their information regardless of whether or not it's in our database
• Would not be a vast departure from our current freeform text field entry model

Autosuggest cons

• Still allowed for freeform entry which resulted in a lot of bad data input

Dropdown pros

• Always resulted in quality data input

• Dropdowns are a convention across the web and our testing participants explicitly noted this point.

Dropdown cons

• Exception handling, that is when a user's desired selection is not listed, did not get noticed by users. Our exception handling process was to place a button next to the dropdown that read "City not listed? Click here to enter it now." If the button is clicked, the dropdowns change to text fields and users then type in cities/streets not listed as selections because they weren't found in our database.

• Since the users couldn't find their city/street in the dropdown, and couldn't find the button, they got frustrated and would select a city/street that was close to theirs, which we obviously don't want since it's not accurate.

My question is: are there any options we're missing here? The fact that our database is incomplete doesn't help our situation, but are there other ways to collect quality data in a situation where the database is incomplete like ours?

Answer 1

Sounds like you want a Combo Box. jQueryUI has a nice example combobox here. You can use AJAX form validation to check and make sure it at least looks like a valid street/ect, and display a little message below the field, something to the effect of "Are you sure this address is correct?" Some validation rules might be to catch street names that are only numbers, contain non-alphanumeric values, ect.

You're going to have to accept user created input for street addresses as many people may live off the beaten path and these addresses may be perfectly valid for the mail system but won't show up in databases. Zip code, state and City you can be more strict in your validation, assuming you have access to a complete set of cities/regions/Zip codes.

Answer 2

You can autosuggest, then if it's typed and not in the database, on save (or blur), show a little popup dialog (inline, not a new browser instance) with a list of suggestions because what they typed isn't in the database. Let them pick one, or continue with what they typed.

Flag records where the user added a new city for manual review.

Answer 3

You have use the bootstrap of twitter, the option is: typeahead