Question

我有这个布局：

<input id="search">

<div class="entry">
  <div class="title">hello</div>
  <div class="description">lorem</div>
</div>

<div class="entry">
  <div class="title">ipsum</div>
  <div class="description">test</div>
</div>

我允许用户通过<{1}} div的内容搜索entry div ：

title

效果很好。试试jsFiddle。

我的问题是，我该如何制作，以便搜索定位jQuery(document).ready(function() { jQuery("#search").on("keyup click input", function () { var val = jQuery(this).val(); if (val.length) { jQuery(".entry").hide().filter(function () { return jQuery('.title',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1; }).show(); } else { jQuery(".entry").show(); } }); }); div 和 title字段的内容？

Answer 1

如果您希望它同时搜索title和description，请使用此功能。

return jQuery('.title, .description',this)

然后它看起来像

jQuery(".entry").hide().filter(function () {
    return jQuery('.title, .description',this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
}).show();

这是link，因此您可以对其进行测试。

Answer 2

在过滤器功能中，您可以添加一个OR条件，该条件可以检查描述并过滤标题或描述的结果。

＆＃13;

jQuery(document).ready(function() {

  jQuery("#search").on("keyup click input", function() {
    var val = jQuery(this).val();
    if (val.length) {
      jQuery(".entry").hide().filter(function() {
        return jQuery('.title, .description', this).text().toLowerCase().indexOf(val.toLowerCase()) != -1;
      }).show();
    } else {
      jQuery(".entry").show();
    }
  });

});

＆＃13;

.entry {
  background: #fff;
  margin-bottom: 10px;
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">

<div class="entry">
  <div class="title">hello</div>
  <div class="description">lorem</div>
</div>

<div class="entry">
  <div class="title">ipsum</div>
  <div class="description">test</div>
</div>

＆＃13;

搜索时定位两个字段

2 个答案: