You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
1.3 KiB
HTML
28 lines
1.3 KiB
HTML
<h2>Advanced Filtering<a href="#advanced-filters"></a></h2>
|
|
|
|
<p>By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item and give your function the element wrapped in jQuery and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
|
|
|
|
<h3>Example</h3>
|
|
<pre rel="JavaScript"><code class="language-javascript">// Filters elements with a data-title attribute with less than 10 characters
|
|
$('#grid').shuffle('shuffle', function($el, shuffle) {
|
|
return $el.data('title').length < 10;
|
|
});</code></pre>
|
|
|
|
<h3>Searching</h3>
|
|
<pre rel="JavaScript"><code class="language-javascript">// Advanced filtering
|
|
$('.js-shuffle-search').on('keyup change', function() {
|
|
var val = this.value.toLowerCase();
|
|
$grid.shuffle('shuffle', function($el, shuffle) {
|
|
|
|
// Only search elements in the current group
|
|
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
|
|
return false;
|
|
}
|
|
|
|
var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
|
|
return text.indexOf(val) !== -1;
|
|
});
|
|
});</code></pre>
|
|
|
|
<p class="demo-link-container">Check out the <a href="{{ site.baseurl }}{% post_url demos/2013-05-02-adaptive %}">compounded filters demo</a>.</p>
|