7

我集成了一个 jquery 搜索插件来搜索同位素元素，该插件使用正则表达式根据搜索输入实时对内容进行排序。

同位素元素会自动更新（我正在使用从社交网络检索数据的 wordpress 插件）

我的问题是，执行搜索后如何重新排序元素？

LE：我已经通过使用其他插件进行搜索解决了这个问题：这是代码：

               $(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' });
}
            });
        });
4

2 回答 2

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: noneusing hide()or fade()，所以这仅在隐藏是即时的情况下才有效（所以我也将过滤器更改为 use hide(0)）例如

    jQuery(this).parent('.' + settings.searchList).hide(0);
于 2013-05-21T11:25:38.093 回答
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');
});
于 2013-05-26T12:38:10.607 回答