Применить поисковый фильтр к соответствующему полю в Jquery

0

У меня есть список продуктов, которые необходимо фильтровать по различным параметрам (марка, функции, цена и т.д.). Ниже мой HTML-код и JQuery у меня есть проблема с фильтром в настоящее время, поскольку я ищу его фильтр, все окна, так как я вызываю его с помощью класса имя. Как я могу сделать только соответствующий (рядом с полем поиска [входной тег]) фильтр, который нужно отфильтровать, когда я набираю что-то вместе с функцией collapse/consum. Скрипт: http://jsfiddle.net/U8T8p/144/

<h3>Brands </h3> 
    <input class="filterinput" type="text"/>
    <ul class="filterlist">
        <li><a href="#">Apple</a></li>
        <li><a href="#">Samsung</a></li>
        <li><a href="#">BlaceBerry</a></li> 
        <li><a href="#">HTC</a></li>
        <li><a href="#">Nokia</a></li>
        <li><a href="#">Micromax</a></li>
    </ul>
    <h3>Features</h3>
   <input class="filterinput" type="text"/>
    <ul class="filterlist">
        <li><a href="#">Android</a></li>
        <li><a href="#">Windows Phone</a></li>
        <li><a href="#">Touch Screen</a></li>
        <li><a href="#">Dual Sim</a></li>
        <li><a href="#">3G Technology</a></li>
    </ul>
    </div>
<h3>Another filter catagory</h3>
   <input class="filterinput" type="text"/>
    <ul class="filterlist">
        <li><a href="#">Android</a></li>
        <li><a href="#">Windows Phone</a></li>
        <li><a href="#">Touch Screen</a></li>
        <li><a href="#">Dual Sim</a></li>
        <li><a href="#">3G Technology</a></li>
    </ul>
    </div>

JQUERY: 1.9.1

 <script type='text/javascript'>
     //<![CDATA[ 
     $(window).load(function () {
         (function ($) {
             $('.filterinput').keyup(function () {
                 var a = $(this).val();
                 if (a.length > 0) {
                     // this finds all links in the list that contain the input,
                     // and hide the ones not containing the input while showing the ones that do
                     var containing = $('.filterlist li').filter(function () {
                         var regex = new RegExp('\\b' + a, 'i');
                         return regex.test($('a', this).text());
                     }).slideDown();
                     $('.filterlist li').not(containing).slideUp();
                 } else {
                     $('.filterlist li').slideDown();
                 }
                 return false;
             })

         }(jQuery));
         // custom css expression for a case-insensitive contains()
         jQuery.expr[':'].Contains = function (a, i, m) {
             return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
         };
     });//]]> 
</script>

Изображение 174551

1 ответ

1
Лучший ответ

Пытаться:

$(".more").click(function () {
    if($(this).text() == "-"){
        $(this).text("+");
    }
    else{
        $(this).text("-");
    }
    $(this).next().slideToggle();
});
$('.filterinput').keyup(function() {
    var a = $(this).val();
    if (a.length > 0) {
        var containing = $('.filterlist li').filter(function () {
            var regex = new RegExp('\\b' + a, 'i');
            return regex.test($('a', this).text());
        }).slideDown();
        $(this).next().find('li').not(containing).slideUp(); //changed
    } else {
        $(this).next().find('li').slideDown(); //changed
    }
    return false;
})

Обновлена скрипка.

  • 0
    Спасибо, Хирал. Не могли бы вы немного помочь, чтобы эти коробки были разрушены?
  • 0
    @ user1610100 добро пожаловать :) пожалуйста, уточните, я не понимаю вашу точку зрения
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню