jQuery的搜索插件，顯示沒有結果

Question

我使用一個jQuery插件，做一個頁面上的搜索：http://rmm5t.github.io/jquery-sieve/

它的偉大工程，但我試圖找出我將如何去了解它更新到如果搜索沒有返回任何內容，則顯示「無結果」。我知道我需要它來隱藏，但是這怎麼就我已經得到了...

http://jsfiddle.net/mZsu2/1/

(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); 

Answer 1

DEMO FIDDLE

的想法是，以在搜索不完全統計可見元素事件，如果沒有可見的div，則顯示「無結果」，否則將其隱藏。

我已經chaged的HTML，CSS，JS一些，檢查演示更多

的Javascript

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

CSS

.div-sieve { 
    margin-top:10px; 
} 
.div-sieve div { 
    background-color:#eeeeee; 
    margin-bottom:10px; 
    padding:10px; 
} 
div.noresults { 
    background-color:#eeeeee; 
    margin-bottom:10px; 
    padding:10px; 
    display:none; 
} 

HTML

<div class="div-sieve"> 
    <div> <a href="#">Question 1?</a> 
     <br />The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die.</div> 
    <div> <a href="#">Question 2?</a> 
     <br />Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</div> 

</div> 
<div class="noresults">Sorry, could not find what you are looking for.</div>