jQuery liveFilter combined with category filter
Hi – I was wondering if it would be possible to use liveFilter in conjunction with a category filter? The code below will filter by Typing OR by Category selection. I would like to be able to search by BOTH. In other words, if the ‘action’ category is selected – liveFilter typing would continue to narrow the search within the ‘action’ category. Any ideas? Thanks!
Here’s the page: http://dl.dropbox.com/u/222645/livefilter.html
Here’s the 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>开发者_JAVA百科
<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>
By changing the filtervalues from livefilter and catgory to global one you can combine them into one filter like this:
<!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
var catgory = 'All';
var filter = '';
(function($){
$.fn.liveFilter = function (wrapper) {
var wrap = '#' + $(this).attr('id');
var item = 'li';
$('input.filter').keyup(function() {
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();
$(wrap + ' ' + wrapper + ' ' + item + ':linot(.' + category + ')').hide();
});
// 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();
category = $(this).attr('id');
$('#list_wrapper ul li').hide();
$('#list_wrapper ul li:Contains("' + filter + '")').show();
$('#list_wrapper ul li:not(.' + category + ')').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>
This is just a quick and dirty solution. Maybe you could abstract the filtering so that the livefilter and the categoryfilter used the same function to do the filtering. That would be a lot "cleaner" code.
加载中,请稍侯......
精彩评论