Jquery Search Plugin, show no results -

Jquery Search Plugin, show no results -

i'm using jquery plugin search on page: http://rmm5t.github.io/jquery-sieve/

it works great, i'm trying figure out how go updating display "no results" if search doesn't come anything. know need hidden, that's how far have gotten...

http://jsfiddle.net/mzsu2/1/

(function() { var $; $ = jquery; $.fn.sieve = function(options) { var compact; compact = function(array) { var item, _i, _len, _results; _results = []; (_i = 0, _len = array.length; _i < _len; _i++) { item = array[_i]; if (item) { _results.push(item); } } homecoming _results; }; homecoming 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) { homecoming item.toggle(match); }, complete: function() {} }, options); if (!settings.searchinput) { searchbar = $(settings.searchtemplate); settings.searchinput = searchbar.find("input"); container.before(searchbar); } homecoming 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; (_i = 0, _len = query.length; _i < _len; _i++) { q = query[_i]; match && (match = text.indexof(q) >= 0); } homecoming settings.toggle(item, match); }); homecoming settings.complete(); }); }); }; }).call(this);

demo fiddle

the thought count visible element on search finish event , , if there no visible divs show "no results", otherwise hide it.

i have chaged html,css,js somewhat, check demo more

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 prevent spread of animals case ever got off island. dr. wu inserted gene makes single faulty enzyme in protein metabolism. animals can't manufacture amino acid lysine. unless they're continually supplied lysine us, they'll slip coma , die.</div> <div> <a href="#">question 2?</a> <br />now know are, know am. i'm not mistake! makes sense! in comic, know how can tell arch-villain's going be? he's exact opposite of hero. , times they're friends, , me! should've known way when... know why, david? because of kids. called me mr glass.</div> </div> <div class="noresults">sorry, not find looking for.</div>

jquery search