添加.slideUp（）和.slideDown（）以搜索結果？

我正在使用jquery sieve腳本在我的div中進行搜索。它工作正常，但我想添加一個jquery動畫來顯示結果。添加.slideUp（）和.slideDown（）以搜索結果？

所以，如果我在搜索框中鍵入內容，div沒有命中應該.slideUp（）。如果我清理搜索框，隱藏的div應該是.slideDown（）。那可能嗎？如果是，如何？我不是很擅長jquery。

THX的幫助。

/*! 
* 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();} 
    } 
}); 
});

來源

2014-10-17 User

注意設置toggle？這就是您定義元素如何顯示/隱藏取決於它是否匹配的位置。您當前的功能使用jQuery的.toggle(show)方法，它只是隱藏和顯示取決於布爾值show - 你可以使用的東西只是一個稍微有點複雜，以獲得您想要的結果：

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

是否this edited fiddle表現爲你喜歡？

來源

2014-10-17 14:05:46

哇，這是一個非常快速和很好的支持，但有一個小錯誤 - 如果您在搜索框中輸入「aa」，則不會出現「noresults」;（僅當您鍵入「aaa」時 – User 2014-10-17 14:10:49

那個人花了我一點時間才搞清楚，問題在於你如何定義盒子應該是什麼時候可見的;檢查是立即執行的，而不是在動畫結束時執行。要麼制定一個不基於大小的標準，或者調用'sieve's'complete'函數作爲對'slideUp（）'和'slideDown（）'的回調。 – 2014-10-17 14:23:04

@Snatch：我無法快速找到一個簡單的方法做這件事，但訣竅是你必須延遲檢查你的標準，直到動畫實際完成（否則'size（）'仍然是'> 0'）或者有一個標準不依賴於尺寸列表中的對象，確定是否該列表是空的或不是。 – 2014-10-17 14:30:01

添加.slideUp（）和.slideDown（）以搜索結果？

回答

相關問題