你好 - 我想知道是否可以将liveFilter与分类过滤器一起使用?下面的代码将通过输入或选择类别进行筛选。我希望能够通过两种方式搜索。换句话说,如果选择了“动作”类别 - liveFilter输入仍将在“动作”类别内缩小搜索范围。有什么想法吗?谢谢!
这是页面:http://dl.dropbox.com/u/222645/livefilter.html
这是html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LiveFilter 1.1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>//liveFilter 1.1 plugin
(function($){
$.fn.liveFilter = function (wrapper) {
var wrap = '#' + $(this).attr('id');
var item = 'li';
$('input.filter').keyup(function() {
var filter = $(this).val();
// Hide all the items and then show only the ones matching the filter
$(wrap + ' ' + wrapper + ' ' + item).hide();
$(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').show();
});
// Custom expression for case insensitive contains()
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
}
})(jQuery);
</script>
<script type="text/javascript"> // Activate liveFilter plugin
$(document).ready(function() {
$('#list_wrapper').liveFilter('ul');
});
</script>
<script> // Filter Results by Category (not part of liveFilter)
$(document).ready(function(){
$('#filter-buttons a').click(function(e){
e.preventDefault();
var filter = $(this).attr('id');
$('#list_wrapper ul li').show();
$('#list_wrapper ul li:not(.' + filter + ')').hide();
});
});
</script>
</head>
<body>
<div id="page_wrapper">
<div id="list_wrapper">
<input class="filter" name="livefilter" type="text" value="" />
<div id="filter-buttons"><!--Filter by Category (not part of liveFilter)-->
<a href='#'>All</a>
<a href='#' id='action'>Action</a>
<a href='#' id='drama'>Drama</a>
<a href='#' id='comedy'>Comedy</a>
</div>
<ul class="live_filter">
<li class="drama"><a href="#">The Shawshank Redemption (1994)</a></li>
<li class="action"><a href="#">The Godfather (1972)</a></li>
<li class="action"><a href="#">Pulp Fiction (1994)</a></li>
<li class="action"><a href="#">The Dark Knight (2008)</a></li>
<li class="drama"><a href="#">Schindler's List (1993)</a></li>
<li class="comedy"><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li>
<li class="comedy"><a href="#">Dumb and Dumber (1995)</a></li>
<li class="action"><a href="#">The Empire Strikes Back (1980)</a></li>
<li class="drama"><a href="#">Casablanca (1942)</a></li>
<li class="action"><a href="#">Star Wars (1977)</a></li>
</ul>
</div>
</div>
</body>
</html>