У меня есть список продуктов, которые необходимо фильтровать по различным параметрам (марка, функции, цена и т.д.). Ниже мой 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>
Пытаться:
$(".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;
})