我使用以下代码段来促进我的同位素实现的实时搜索.
我们的同位素返回HTML,如下所示：
<div class="item"> <span class="title"></span> <span calss="description"></span>
jQuery(document).ready(function($) {
$(document).ready(function(){
var $container = $('#portfolio'),// create a clone that will be used for measuring container width
$containerProxy = $container.clone().empty().css({ visibility: 'hidden' });
$container.after( $containerProxy );
// get the first item to use for measuring columnWidth
var $item = $container.find('.portfolio-item').eq(0);
$container.imagesLoaded(function(){
$(window).smartresize( function() {
// calculate columnWidth
var colWidth = Math.floor( $containerProxy.width() / 5 ); // Change this number to your desired amount of columns
// set width of container based on columnWidth
$container.css({
width: colWidth * 5 // Change this number to your desired amount of columns
})
.isotope({
// disable automatic resizing when window is resized
resizable: false,// set columnWidth option for masonry
masonry: {
columnWidth: '.grid-sizer',gutter: '.gutter-sizer'
}
});
// trigger smartresize for first time
}).smartresize();
});
$( function() {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('#portfolio').isotope({
itemSelector: '.portfolio-item',layoutMode: 'fitRows',filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(),'gi' );
$grid.isotope();
},200 ) );
// bind filter on select change
$('#filter-select').on( 'change',function() {
// get filter value from option value
var filterValue = this.value;
$grid.isotope({ filter: filterValue });
});
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn,threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed,threshold || 100 );
}
}
// filter items when filter link is clicked
$('#filters a').click(function(){
$('#filters a.active').removeClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector,animationEngine : "css" });
$(this).addClass('active');
return false;
});
});
});
解决方法
我相信这是你想要在你的init只匹配标题：
return qsRegex ? $(this).find('.title').text().match( qsRegex ) : true;
即在当前节点中查找.title,获取其文本(),然后运行正则表达式.
关于处理多个过滤器的后续问题：目前,您正在运行单独的$grid.isotope({filter：…})函数,每个UI小部件使用不同的过滤器,它会覆盖任何先前选择的过滤器设置.
避免这个问题的一种方法是编写一个检查所有条件的单个过滤器函数.下面是一个工作的例子;有趣的位被评论.
$(function() {
var $grid = $('#container');
$grid.isotope({itemSelector: '.item'});
var filters = []; // A convenient bucket for all the filter options,// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup',function() {
// debounce removed for brevity,but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change',function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0],'gi');
// if the title doesn't match,eliminate it:
if (!$(this).find('.title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera,for any other filters
// successfully passed all conditions,so:
return true;
}
});
}
});
.item {
width: 120px;
height: 70px;
margin: 3px; padding: 3px;
display: inline-block;
}
.red {background: red;}
.blue {background: blue;}
.green {background: green;}
.yellow {background: yellow;}
/* isotope css (animations etc) omitted */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://isotope.Metafizzy.co/v1/jquery.isotope.min.js"></script> <div id="filters"> Color: <select id="filter-select"> <option value="">All</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select><br> Title: <input type="text" class="quicksearch"> </div> <div id="container"> <div class="red item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div> <div class="green item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div> <div class="blue item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div> <div class="yellow item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div> <div class="red item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div> <div class="green item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div> <div class="blue item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div> <div class="yellow item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div> <div class="red item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div> <div class="green item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div> <div class="blue item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div> <div class="yellow item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div> </div>
