Question

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

所以，如果我在搜索框中输入内容，那么没有匹配的div应该是.slideUp（）。如果我清理搜索框，隐藏的div应该是.slideDown（）。那可能吗？如果有，怎么样？我不是很擅长jquery。

寻求帮助。

/*!
* 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

注意设置toggle？您可以根据它是否匹配来定义元素的显示/隐藏方式。您当前的函数使用jQuery .toggle(show)方法，它根据布尔值show隐藏和显示 - 您可以使用更复杂的东西来获得所需的结果：

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

this edited fiddle是否符合您的要求？

添加.slideUp（）和.slideDown（）来搜索结果？

1 个答案: