Question

我的目标是隐藏与多个<input>的输入不匹配的元素。如果它只是一个输入，我可以这样做但是当我切换到另一个输入时它会重置。我使用jQuery的keyup或input事件完成了此操作。但我的问题是有多个输入（特别是文本，复选框和无线电）。是否有插件或框架甚至手动方式来执行此操作？

Example UI以便更好地理解。

的JavaScript

$('#search').on('input', function () {
    var card = $('[data-dorm]');
    for (i = 0; i < card.length; i++) {
      if (!(card[i].dataset.dorm.toLowerCase().indexOf(this.value.toLowerCase()) > -1) && !(card[i].classList.toString().indexOf('hide') > -1)) {
        $('#'+card[i].id).hide();
      } else if (this.value === '') {
        $('#'+card[i].id).show();
      }
    }
  });

我有data-price

的类似代码

HTML

<a href="Dorm_Content.html" class="col s6 m4 l3 xl2" id="d1" data-dorm="SLU Dormitory" data-price="3000">
      <div class="card waves-effect waves-block">
        <div class="card-image">
          <img src="http://materializecss.com/images/sample-1.jpg">
          <span class="card-title">SLU Dormitory</span>
        </div>
        <div class="card-content p-1">
          <i class="fas fa-wifi"></i>
          <i class="fas fa-shower"></i>
          <i class="fas fa-utensils"></i>
          <span class="right">PHP 3000</span>
        </div>
      </div>
    </a>

例如，我在这里有这些卡片，我希望其他卡片在数据宿舍和/或价格不匹配时隐藏。

Answer 1

JQuery quicksearch做得非常好，可以轻松应用于各种html元素（带图像的示例div）。

我以前做过的一些小例子：

表格行过滤：JSFiddle

$('input#id_search').quicksearch('table#table_example tbody tr');

日历项目：JSFiddle

$('#quicksearch').quicksearch('#calendar a.fc-event');

如果你分享一些HTML和JS，我们可以很容易地展示你想要实现的一个例子。

从多个输入实时搜索

1 个答案: