Search in select list?

Question

i would like make somethings:

<select>
    <option value=""> Please select </option>
    <option value="search"> < /input search > </option>
    <option value="name1"> name1 </option>
    <option value="aname2"> aname2 </option>
    <option value="bname3"> bname3 </option>
    <option value="bname4"> bname4 </option>
    <option value="cname5"> cname5 </option>
    <option value="cname6"> cname6 </option>
</select>

http://jsfiddle.net/vvJ5d/1/

If i set/mouseover/click option SEARCH then i would like search in others option value. I have select with 300 option. For example if i write b then this show me in list only bname3 and bname4 .

How can make somethings? may be something like. I must use jQuery, not Mototools etc

Solution 1

Use Chosen, i think this is the best plugin:

http://harvesthq.github.com/chosen/

Solution 2

You don't want to do this with a basic select as it is not possible. But jQuery UI has autocomplete: http://jqueryui.com/demos/autocomplete/ which would be perfect for you.

Here's a more specific example for you: http://jsfiddle.net/jGme9/

Solution 3

you can use autocomplete from jQuery

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("#selectid").autocomplete(data, {
    formatItem: function(item) {
        return item.text;
    }
}).result(function(event, item) {
      location.href = item.url;
});