在選擇列表中搜索？

Question

我想做出出頭：

<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/

如果我設置/鼠標懸停/點擊選項進行搜索，那麼我想在其他選項值搜索。 我選擇了300選項。例如，如果我寫B那麼這隻顯示在列表中BNAME3和BNAME4。

怎樣才能做點什麼？可能是類似的。我必須使用jQuery，而不是Mototools等

Answer 1

使用選上，我認爲這是最好的插件：

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

Answer 2

你不想用基本的選擇做這件事，因爲這是不可能的。但jQuery UI有自動完成：http://jqueryui.com/demos/autocomplete/這對你來說是完美的。

這裏是爲您提供更加具體的例子：http://jsfiddle.net/jGme9/

Answer 3

你可以使用自動完成從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; 
}); 

Answer 4

只要你允許有一個單獨的查詢輸入字段，並不需要卸載s目錄操作搜索到服務器，這可能是這樣寫的：

<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> 

形式：

<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/