Drop-Down List with two types of data? User choice of either

Question

This is for a web based app. I currently have html select (drop-down list) where the user selects a widget. The list is currently sorted by a readable name for the widget, but I also want to allow for the user to enter a widget number. Not all users will know the widget number, but for those that do, I'd like to speed up the process.

To accommodate these 'savvy' users I currently have a separate input textbox that they can skip the drop-down and just enter the number. This works, but it feels sorta 'off', plus it is also adding something to the screen that could confuse first time users. Its not ideal and I'd like to change it.

I'm looking for a solution that would allow a user to click on an element, see the list, but also type the widget number to bypass possibly large amounts of scrolling.

This will be brought to life via - HTML, CSS, jQuery, and PHP. A jQuery plugin would work, I've considered the built in jqueryUI autocomplete combobox(http://jqueryui.com/autocomplete/#combobox), but I wanted to see if there were other solutions.

Answer 1

I think the old combobox would be a good solution to your problem: These are a drop down list with a text field at the top. They're not standard web components so you'd have to construct one.

So given a combobox, list the names of your components prefixed by their number:

• 1 button-1
• 2 slider-1
• 3 textarea-1

etc. The behavior of the combobox would be that as someone types in the textfield the best match is always selected in the list. Once the selected item is correct, hitting return commits the selection. Of course if the desired item is visible in the list it can be selected with the mouse (or finger). Given the convenience of a combobox, you might even do away number prefix in the list as typing the component name might be more efficient than typing the number - remember often you don't have to type in the complete name to get to the area of the list you want.

Answer 2

You may try to use your own customized drop down list which will behave as follows:

1. Every item has it's own number associated
2. Drop down has a tip at the bottom suggesting using widget number for a quick select
3. As soon as user start typing a tip is replaced with a small textfield which will show the number typed (and if the user will press backspace, etc, you should handle it properly) and the corresponding widget is selected

See the pic for how it may look like: