input - Best way to offer a large amount of selectable options (without using Javascript)?

I come from stackoverflow and have no answers for this one, so I turn to the UI guys for assistance.

Let's say I have a library application that allows a user (librarian) to add a book to the database. One of the features is tagging an author to a certain book. A book can have more than one author, so a UI that allows multiple tags is required. I really want it to follow the progressive enhancement approach, from a basic functional site to a JS/CSS enhanced version.

I already have a database of at least 450 authors. For the enhanced version an auto-complete and editable select is in my arsenal and has proven effective. The problem is with the basic version, especially for mobile devices and incapable browsers (like opera mini perhaps?).

From a programmer's view, a multiple-select box should do. But by reading at least 3 UX books, a multiple-select is a "no go" since there is no indication (unless explicitly mentioned) that a select is multiple-enabled. Also not good for the physically-challenged people since you have to hold down Command (Mac) or Ctrl (PC) to multiple select. Mobile browsers have none of those keys also! To add to that, 450+ selections in one box?

In summary:

• 450+ items to choose from


• selecting multiple items



• progressive enhancement approach


• this is for the basic view (No Javascript, limited CSS)


• mainly targeted to non-modern and limited feature browsing devices (like opera mini and mobile browsers that have no JavaScript capability)

What's the best way to tackle this situation? How did they even do this prior to web 2.0?

Answer

A dropdown with 450+ values is extremely unusable on any device, including desktop. But you say that you're only looking for a solution for the basic mobile version, so let's stick to that.

Probably the best way to simplify this for the mobile is to have a first screen/popup display the alphabet, then as you tap a letter you drill down to the list of authors beginning with that letter. Your largest list per letter, even for the most common letters, should be at about 30-40 values, which can be scrolled easily. Then you tap a name to select it, press Back to return to the alphabet and proceed to select additional authors until you press Done. That's the most standard approach for mobile, based on simple linear navigation.

A better way would be to develop something resembling a phone book app, but I guess you can't do that on a web app without JS.