Databases
StackOverflow2013
Postsdbo
POjQuery liveFilter combined with category filter
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery liveFilter combined with category filter
    text
    copied!<p>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!</p> <p>Here’s the page: <a href="http://dl.dropbox.com/u/222645/livefilter.html" rel="nofollow noreferrer">http://dl.dropbox.com/u/222645/livefilter.html</a></p> <p>Here’s the html:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;title&gt;LiveFilter 1.1&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt;//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())&gt;=0; }; } })(jQuery); &lt;/script&gt; &lt;script type="text/javascript"&gt; // Activate liveFilter plugin $(document).ready(function() { $('#list_wrapper').liveFilter('ul'); }); &lt;/script&gt; &lt;script&gt; // 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(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="page_wrapper"&gt; &lt;div id="list_wrapper"&gt; &lt;input class="filter" name="livefilter" type="text" value="" /&gt; &lt;div id="filter-buttons"&gt;&lt;!--Filter by Category (not part of liveFilter)--&gt; &lt;a href='#'&gt;All&lt;/a&gt; &lt;a href='#' id='action'&gt;Action&lt;/a&gt; &lt;a href='#' id='drama'&gt;Drama&lt;/a&gt; &lt;a href='#' id='comedy'&gt;Comedy&lt;/a&gt; &lt;/div&gt; &lt;ul class="live_filter"&gt; &lt;li class="drama"&gt;&lt;a href="#"&gt;The Shawshank Redemption (1994)&lt;/a&gt;&lt;/li&gt; &lt;li class="action"&gt;&lt;a href="#"&gt;The Godfather (1972)&lt;/a&gt;&lt;/li&gt; &lt;li class="action"&gt;&lt;a href="#"&gt;Pulp Fiction (1994)&lt;/a&gt;&lt;/li&gt; &lt;li class="action"&gt;&lt;a href="#"&gt;The Dark Knight (2008)&lt;/a&gt;&lt;/li&gt; &lt;li class="drama"&gt;&lt;a href="#"&gt;Schindler's List (1993)&lt;/a&gt;&lt;/li&gt; &lt;li class="comedy"&gt;&lt;a href="#"&gt;One Flew Over the Cuckoo's Nest (1975)&lt;/a&gt;&lt;/li&gt; &lt;li class="comedy"&gt;&lt;a href="#"&gt;Dumb and Dumber (1995)&lt;/a&gt;&lt;/li&gt; &lt;li class="action"&gt;&lt;a href="#"&gt;The Empire Strikes Back (1980)&lt;/a&gt;&lt;/li&gt; &lt;li class="drama"&gt;&lt;a href="#"&gt;Casablanca (1942)&lt;/a&gt;&lt;/li&gt; &lt;li class="action"&gt;&lt;a href="#"&gt;Star Wars (1977)&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload