我有一个多重过滤器列表,我想在它们上方放置一个输入搜索过滤器,我如何过滤每个列表的列表,而不是乘以代码来为每个列表创建函数,我将尝试的方法放在这里:
function FilterPret() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('pretfilter');
filter = input.value.toUpperCase();
ul = document.getElementById("filter-ul-pret");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("label")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
因此,我不想为每个过滤器列表都设置9个函数,因为这些过滤器是来自后端的,所以我想创建1个函数。
更新:HTML
<aside class="sidebar-tag filter tags shop by price ">
<div class="widget">
<h4>
<span>Duritate </span>
<a href="javascript:void(0)" class="clear" style="display:none">
<i class="fas fa-times"></i>
</a>
</h4>
<div class="widget-content">
<input type="text" id="duritatefilter" class="myfilterinput" onkeyup="FilterPret()" placeholder="Cauta duritatea">
<ul class="scroll-basic">
<li><label for="val1">
<input type="checkbox" id="val1" value="100-300"><span>Moale</span></label>
</li>
<li><label for="val1"><input type="checkbox" id="val1" value="100-300">
<span>Mediu</span></label>
</li>
<li><label for="val1"><input type="checkbox" id="val1" value="100-300">
<span>Tare</span> </label>
</li>
</ul>
</div>
对于每个id
使用不同的ul
,并在keyup事件中将其作为参数传递给FilterPret()
函数。然后,将静态值filter-ul-pret
传递给id
并收集列表项。