2012-03-21 139 views
0

我在<SELECT>中有一長串選項。篩選器下拉選項w/jQuery

我需要一種簡單的方式來篩選選項,因爲我鍵入字母。如果可能的話,我想用jQuery來做。我查看了一些插件,但它們都顯得太複雜了。即使是jQuery UI的AUTOCOMPLETE。我不想任何樣式,只是使用jQuery增強的簡單HTML。

我確定有人已經做了這樣的事情。任何向正確的方向微調都將受到高度讚賞。

<select id="mySelector"> 
    <option value=""></option> 
    <option value="ActionScript">ActionScript</option> 
    <option value="AppleScript">AppleScript</option> 
    <option value="Asp">Asp</option> 
    <option value="BASIC">BASIC</option> 
    <option value="C">C</option> 
    <option value="C++">C++</option> 
    <option value="Clojure">Clojure</option> 
    <option value="COBOL">COBOL</option> 
    <option value="ColdFusion">ColdFusion</option> 
    <option value="Erlang">Erlang</option> 
    <option value="Fortran">Fortran</option> 
    <option value="Groovy">Groovy</option> 
    <option value="Haskell">Haskell</option> 
    <option value="Java">Java</option> 
    <option value="JavaScript">JavaScript</option> 
    <option value="Lisp">Lisp</option> 
    <option value="Perl">Perl</option> 
    <option value="PHP">PHP</option> 
    <option value="Python">Python</option> 
    <option value="Ruby">Ruby</option> 
    <option value="Scala">Scala</option> 
    <option value="Scheme">Scheme</option> 
</select> 
+0

http://stackoverflow.com/questions/188442/whats-a-good-ajax-autocomplete-plugin-for-jquery - 此堆棧應該爲你工作。 – Downpour046 2012-03-21 18:48:09

+0

您希望能夠將字母輸入到文本輸入並相應地選擇字段更新? – Vigrond 2012-03-21 18:48:46

+0

jQuery自動完成是您正在尋找的語句。 – Downpour046 2012-03-21 18:48:47

回答

1
$('#textbox').keyup(function(){ 
    text=$(this).value(); 
    $('select option').hide(); 
    $('select option').filter(':contains('+text')').show(); 
}) 

這應該給你一個大概的瞭解如何進行。使用包含選擇器來篩選