Фильтрация списка выбора через поле ввода и jquery - PullRequest
Новая
       31

Фильтрация списка выбора через поле ввода и jquery

2 голосов
/ 23 апреля 2010

Мне было интересно, смогу ли я получить некоторую помощь по фильтрации списка выбора с помощью поля ввода через jquery.

Вот как выглядит мой js, но, похоже, он не работает. Я предполагаю, что это потому, что опции в списке выбора не скрыты. 

    <script type="text/javascript">
    $(document).ready(function() {
        $("#inputFilter").change(function() {
            var filter = $(this).val();

            $("#selectList option").each(function() {
                var match = $(this).text().search(new RegExp(filter, "i"));
                if (match > 0) {
                    $(this).show(); // Does not work
                }
                else
                    $(this).hide();
            });
        });
    });
</script>

и вот мой HTML 

<input id="inputFilter" />
<select id="selectList">
    <option value="1111" >1111 - London</option>
    <option value="1112" >1112 - Paris </option>
</select>

Ответы [ 3 ]

4 голосов
/ 23 апреля 2010

Пожалуйста, попробуйте это: 

$("#inputFilter").change(function() {
    var filter = $(this).val();
    //alert(filter);
    $("#selectList option").each(function() {
        var match = $(this).text().search(new RegExp(filter, "i"));
        //alert(match);
        if (match < 0 && $(this).text() != "--select--")  {                   
            $(this).attr("disabled",true);
        }
        else
            $(this).attr("disabled",false);

    });
});

Вы можете увидеть это в действии здесь .

НТН

0 голосов
/ 23 апреля 2010

Нет атрибута text.

Попробуйте что-то вроде этого: 

<input id="inputFilter" />
<select id="selectList">
   <option value="1111">1111 - London</option>
   <option value="1112">1111 - Paris</option>
</select>

<script>
$(document).ready(function() {
   $("#inputFilter").change(function() {
      var filter = $(this).val();
      $("#selectList option").each(function() {
         var match = $(this).text().search(new RegExp(filter, 'i'));

         if (match > 0) {
            $(this).show();
         }
         else{
            $(this).hide();
         }
      });
   });
});
</script>

Редактировать: отредактировал мой ответ, потому что я чего-то не понял.

0 голосов
/ 23 апреля 2010

Попробуйте отключить, а не скрывать. 

$(this).attr('disabled', 'disabled');

Еще одна вещь, которую вы можете сделать, это полностью удалить опцию из DOM.

...