从多个输入进行实时搜索

Question

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

示例 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 快速搜索可以很好地做到这一点，并且可以轻松地应用于各种 html 元素(例如带有图像的div(。

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

• 表行筛选：JSFiddle

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

• 日历项目： JSFiddle

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

如果您共享一些HTML和JS，我们可能可以轻松显示您想要实现的示例。