use jQuery instead of long listed < SELECT > box?

Question

Right now I have an app that allows a user to pick a ring from a drop down (select) box. There can be many to choose from and it creates a long drop down that isn't very nice to use. I would like to maybe use jQuery to make this a little nicer. Like maybe have a tab on the top where they can choose "white gold", "yellow gold", etc. to narrow the options I am not sure. I have never used jQuery and not sure what it can do for me here, so I am open to any suggestions. I only have one requirement, right now each < option > has a value attribute indicating the stock number for the selected item, so when the submit button is clicked my processing page receives the stock number of the item they want; I need to keep that functionality.

Can anyone tell me a cool solution for this?

Thanks!

Answer 1

Have you checked out the jQuery UI Demos yet? The interaction 'Selectable' and maybe the widget 'Tabs' might be of interest for you.

Answer 2

Hmm, something like FlexBox?

Answer 3

You might want to look at the jQuery autocomplete plugin. You can constrain the autocompleted input so that it must be chosen from your autocomplete list. If you set the number of characters required to 0, it might be able to bring up your entire list when the text box gets focus, then narrow down as the user starts typing.