Блог

Я использую плагин 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 amp;amp; (match = text.indexOf(q) >= 0);
      }
      return settings.toggle(item, match);
    });
    return settings.complete();
  });
});
};

}).call(this);
  

ДЕМОНСТРАЦИОННАЯ СКРИПКА

идея состоит в том, чтобы подсчитать видимый элемент в событии завершения поиска, и если видимых divs нет, тогда покажите «Нет результатов», в противном случае скройте его.

я немного изменил 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>