Search in select list?

i would like make somethings:

<select>
 开发者_C百科   <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

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/

Use Chosen, i think this is the best plugin:

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

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;
});

As long as you allow there to be a separate input field for the query and do not need to offload the search to the server, this could be written like this:

<script>
function bind_select_search(srch, select, arr_name) {    
  window[arr_name] = []
  $(select + " option").each(function(){                    
        window[arr_name][this.value] = this.text
  })
  $(srch).keyup(function(e) {
      text = $(srch).val()
      if (text != '' || e.keyCode == 8) {
            arr = window[arr_name]
            $(select + " option").remove()                          
          tmp  = ''
          for (key in arr) {
              option_text = arr[key].toLowerCase()
              if (option_text.search(text.toLowerCase()) > -1 ) {                     
                  tmp += '<option value="'+key+'">'+ arr[key] +'</option>'
              }
          }
          $(select).append(tmp)
       }
   })
  $(srch).keydown(function(e) {
          if (e.keyCode == 8) // Backspace
              $(srch).trigger('keyup')
  })

}





</script>

Form:

<input id="srch" type="text" name="search">    
<select id="slct">
    <option value="1">London</option>
    <option value="2">New York</option>
    <option value="3">Paris</option>
    <option value="4">Oslo</option>
    <option value="5">Berlin</option>
</select>

http://jsfiddle.net/X72G7/3/