Question

我使用jquery插件在页面上进行搜索：http://rmm5t.github.io/jquery-sieve/

效果很好，但是我试图弄清楚如何更新它以显示＆＃34;没有结果＆＃34;如果搜索没有任何回复。我知道我需要把它隐藏起来，但那已经有多远了......

(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，则显示＆＃34;没有结果＆＃34;，否则隐藏它。

我已经对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>

Jquery Search Plugin，没有显示结果

1 个答案: