javascript - 将 .slideUp() 和 .slideDown() 添加到搜索结果？

Question

我正在使用 jquery sieve 脚本在我的 div 中进行搜索。它工作正常，但我想添加一个 jquery 动画来显示结果。

所以，如果我在搜索框中输入一些内容，没有命中的 div 应该是 .slideUp()。如果我清理搜索框，隐藏的 div 应该是 .slideDown()。那可能吗？如果是，怎么办？我不太擅长jquery。

FIDDLE

感谢帮助。

/*!
* jQuery Sieve v0.3.0 (2013-04-04)
* http://rmm5t.github.io/jquery-sieve/
* Copyright (c) 2013 Ryan McGeary; Licensed MIT
*/ (function () {
var $;

$ = jQuery;

$.fn.sieve = function (options) {
    var compact;
    compact = function (array) {
        var item, _i, _len, _results;
        _results = [];
        for (_i = 0, _len = array.length; _i < _len; _i++) {
            item = array[_i];
            if (item) {
                _results.push(item);
            }
        }
        return _results;
    };
    return this.each(function () {
        var container, searchBar, settings;
        container = $(this);
        settings = $.extend({
            searchInput: null,
            searchTemplate: "<div><label>Search: <input type='text'></label></div>",
            itemSelector: "tbody tr",
            textSelector: null,
            toggle: function (item, match) {
                return item.toggle(match);
            },
            complete: function () {}
        }, options);
        if (!settings.searchInput) {
            searchBar = $(settings.searchTemplate);
            settings.searchInput = searchBar.find("input");
            container.before(searchBar);
        }
        return settings.searchInput.on("keyup.sieve change.sieve", function () {
            var items, query;
            query = compact($(this).val().toLowerCase().split(/\s+/));
            items = container.find(settings.itemSelector);
            items.each(function () {
                var cells, item, match, q, text, _i, _len;
                item = $(this);
                if (settings.textSelector) {
                    cells = item.find(settings.textSelector);
                    text = cells.text().toLowerCase();
                } else {
                    text = item.text().toLowerCase();
                }
                match = true;
                for (_i = 0, _len = query.length; _i < _len; _i++) {
                    q = query[_i];
                    match && (match = text.indexOf(q) >= 0);
                }
                return settings.toggle(item, match);
            });
            return settings.complete();
        });
    });
};

}).call(this);


$(function () {
var searchTemplate = "<label style='width:100%;'>Search: <input type='text' class='form-control' placeholder='search' style='width:80%;'></label>"
$(".div-sieve").sieve({
    searchTemplate: searchTemplate,
    itemSelector: "div",
    complete: function () {
    var visible = $('.div-sieve>div:visible').size();
        if(visible){
            $(".noresults").hide();
        }
        else{$(".noresults").show();}
    }
});
});

Answer 1

注意到设置切换了吗？您可以在其中定义元素如何显示/隐藏，具体取决于它是否匹配。您当前的函数使用 jQuery .toggle(show) 方法，该方法只是根据 bool 值 show 隐藏和显示 - 您可以使用更多的东西复杂的以获得您想要的结果:

toggle: function(item, match) {
    return match ? item.slideDown() : item.slideUp();
}

是this edited fiddle表现得像你喜欢的那样吗？