将搜索过滤器应用于Jquery中的相应框

Question

我有产品列表需要通过不同的选项（品牌，功能，价格等）过滤下面是我的HTML代码和Jquery，我有一个过滤器的问题，因为我搜索它过滤所有的框，因为我称之为使用类名。我怎样才能使它只有相应的（搜索框[输入标签]旁边）过滤器列表进行过滤，因为我输入了崩溃/消耗功能。  小提琴：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>

Answer 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;
})

Updated fiddle here.