jQuery and JavaScript - Allowing Default First Selection On Key Press Drop Down Behavior In Replaced Divs / Spans

Question

We are trying to use a set of styled divs and spans to create a cross-browser styled drop down box using the jQuery Selectbox script below. It's working great, but there's a really annoying nagging issue that is that it does not do one thing that drop down input controls normally do.

Usually when someone has a drop down menu/list that is very long and a user types the first letter of an item, the drop down menu/list will select that first item for them without them having to scroll. Not auto-complete, but just this default first selection behavior. For example in a list of countries, if someone normally selects an input control drop down menu and presses "U" the first country that starts with "U" is selected.

Does anyone have any experience with allowing this same behavior when divs and spans are used?

http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

http://code.google.com/p/wixet/source/browse/branch/wixet3rd/js/jquery.selectbox-0.6.1.js?r=172

Answer 1

look here, you can use similar to this...

http://labs.abeautifulsite.net/jquery-selectBox/

http://labs.abeautifulsite.net/jquery-selectBox/jquery.selectBox.js

Answer 2

If the behavior isn't supported by the plugin you're using, you might want to consider trying another plugin. I've used the searchable dropdown plugin with success. You have skinning control so you should be able make it look how you want.

http://jsearchdropdown.sourceforge.net/