Typeahead / Autocomplete graceful degradation

Question

Consider the case when the user is asked to select one item from a fixed list.

If the list contains more than a dozen items, an autocomplete / typeahead type widget has proven itself to be very user-friendly and quick to use. You type a few letters and a popup appears—or is updated—with relevant matches, without stealing your focus from the search box. When you find what you are looking for, you can click on it from the popup, or select it with arrow keys and confirm with Enter.

When the list has less than a couple hundred items, the best HTML-only graceful degradation is a simple select box. The list of countries (206 as of this writing) is the classical example that's at the limit of usability for a select box. Anything longer than that and it gets heavy to download and render and cumbersome to use.

So what is a good HTML-only graceful degradation for a typeahead / autocomplete box, when the list contains thousands of items?

Ideas:

1. Just let the user type whatever they want in the text field. If they have no Javascript and just sumbit the form, you can show them an intermediate step where they will see the matching items, refine their search and make a choice.
    
   But what if the original form contains more than one typeahead box? Would you show them a sequence of intermediate steps, one to refine each selection?

2. Replace the typeahead boxes with buttons.* Each button will submit the partial form (to be stored on the server in some temporary or session storage) and show a page with all the tools to search for items and make a selection. When the user makes their selection, go back to the half-filled form and let them continue.

3. Replace the typeahead boxes with iframes* (say, 5 to 10 lines tall, as big as a textarea.) Each iframe will let them perform independent searches and selections, which will be stored on the server, without disrupting the main form.

Any other idea?

_{_____________
* Of course, technically it's the opposite: you put the degraded interface in the HTML and then use JS to replace it with the autocomplete.}

Answer 1

You've asked for graceful degradation... this isn't ideal, but a variation of idea 1 would work reasonable OK.

Give user a text field with a search button next to it. User types in their search string and hit search. Page refresh to show them a list of the best matches as radio selections.

User can choose to select an option, or choose to search again.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can realistically treat this as a larger block on your form and so you can have multiple of these no problem. Not sure what sort of ramification this may have server side though.