我已经集成了一个jquery搜索插件来搜索同位素元素,该插件使用正则表达式根据搜索输入实时对内容进行排序。
同位素元素正在自动更新(我正在使用wordpress插件从社交网络中检索数据)
我的问题是,如何在执行搜索后对元素重新排序?
L.E:我通过SEARCHING使用其他插件解决了这个问题: 这是代码:
$(document).ready(function () {
$("#id_search").quicksearch(".dcsns-content .isotope-item", {
noResults: '#noresults',
loader: 'span.loading',
'show': function () {
$(this).addClass('quicksearch-visible');
},
'hide': function () {
$(this).removeClass('quicksearch-visible');
},
'onAfter': function () {
$('.dcsns-content .stream').isotope({ filter: '.quicksearch-visible' });
}
});
});
答案 0 :(得分:3)
我能够通过在filtercontent.js文件的末尾添加以下内容来获得一次性示例:
// Get isotope container
$container = jQuery('.dc-wall .stream');
// Clear out existing isotope class instance
$container.data('isotope', null);
// Start a new isotope instance on the container
$container.isotope({ filter: ':visible', sortBy: 'postDate' });
这仅在您第一次点击search 1
时有效,但显示重启同位素的概念有效。我不太清楚你的过滤是如何工作的,但我希望这确实给你一个起点。
有一个问题是,内容过滤器会使用display: none
或hide()
将项目设置为fade()
,因此仅当隐藏是即时的时才会生效(所以我也将过滤器更改为使用hide(0)
)例如
jQuery(this).parent('.' + settings.searchList).hide(0);
答案 1 :(得分:2)
当您将$ container声明为.load时,只有.load函数会看到它
两个解决方案,你添加var $ container = $();在正常的js中.load和.ready将访问它
或者将所有内容合并到.ready函数中:
$(function(){
var $searchBox = $("#searchbox");
var $searchFilter = $('.searchFilter');
var $container = $('.wall-outer .stream');
$searchBox.on("blur",function(){
if(this.value === '')
this.value='Keyword(s)';
}).on("focus",function(){
if(this.value === this.defaultValue)
this.value = '';
else this.value = null;
});
$searchFilter.simpleContentSearch({
'active' : 'searchBoxActive',
'normal' : 'searchBoxNormal',
'searchList' : 'dcwss-content ul li', // this is important
'searchItem' : 'div' // this is important
});
$(".search-btn").on("click", function(){
$searchBox.val( $(this).data("search") );
$searchFilter.keyup();
$container.isotope('reLayout');
});
$(".search-reset").on("click", function(){
$searchBox.val("");
$searchFilter.keyup();
$container.isotope('reLayout');
});
$container.isotope('reLayout');
});