CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Filter drop-down options w/ jQuery

I have a long list of options in <SELECT>.

I need a simple way to filter the options as I type letters. I'd like to do it with jQuery, if possible. I looked at a number of plugins but they all appear to be too complicated. Even jQuery UI's AUTOCOMPLETE. I don't want to style anything, just simple HTML enhanced with jQuery.

I'm sure someone already has done something like this. Any nudge in the right direction would be highly appreciated.

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

Upvotes: 0

Views: 1404

Answers (1)

SoWhat
SoWhat

Reputation: 5622

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

This should give you a rough idea how to proceed. Use the contains selector to filter

Upvotes: 1

Related Questions