2012-03-21 3 views
0

У меня есть длинный список опций в <SELECT>.Параметры раскрывающегося списка фильтров w/jQuery

Мне нужен простой способ фильтрации параметров по мере ввода букв. Я хотел бы сделать это с помощью jQuery, если это возможно. Я просмотрел несколько плагинов, но все они кажутся слишком сложными. Даже AUTOCOMPLETE пользовательского интерфейса jQuery. Я не хочу ничего стилизировать, просто упростить HTML с помощью jQuery.

Я уверен, что кто-то уже сделал что-то подобное. Любое толчок в правильном направлении будет высоко оценен.

<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

+0

Вы хотите иметь возможность набирать буквы в текстовый ввод и иметь соответствующее полевое обновление соответственно? – Vigrond

+0

jQuery autocomplete - это фразировка, которую вы ищете. – Downpour046

ответ

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

Это должно дать вам общее представление о том, как действовать. Используйте селектор содержимого для фильтрации

Смежные вопросы