根据文本输入筛选div

Question

我的过滤器分区有两个布局。一个专用于桌面设备，一个专用用于移动设备。我希望它能根据用户输入的文本过滤项目。这是输入div

<div class="search-wrapper">
<input class="searchInput TextFilter-mobile" type="text" onkeyup="searchFunction()" placeholder="Zoeken..">
</div>

现在我有两个单独的div出现在右边的设备上：首先是移动设备：

<div class="card card-filterDiv zuivel special">
<div class="card-horizontal">
<div class="image-wrapper">
<img class="clip-product-img-mobile" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap">
<button class="btn btn-success">
<i class="fas fa-cart-plus add-to-cart-icon"></i>
</button>
</div>
<div class="card-body">
<h2 class="food card-title mr-0" style=">Bokkenpootjes</h2>
</div>
</div>
</div>

这是台式机：

<div class="card card-filterDiv special zuivel">
<img class="card-img-top clip-product-img-desktop" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap">
<button class="btn btn-success">
<i class="fas fa-cart-plus add-to-cart-icon""></i>
</button>
<div class="card-body">
<h2 class="food card-title mr-0">Bokkenpootjes</h2>
</div>
</div>

我做了一个处理逻辑的函数：

function searchFunction() {
// necessary variables
var input, filter, card, h2, a, i, txtValue;
input = document.querySelector(".searchInput");
filter = input.value.toUpperCase();
cardfilter = document.getElementsByClassName('card-filterDiv');

// Loop through all cards, and hide those who don't match the search query at h2 Tag
for (i = 0; i < cardfilter.length; i++) {
a = cardfilter[i].getElementsByTagName("h2")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
cardfilter[i].style.display = "";
} else {
cardfilter[i].style.display = "none";
}
}
}

它可以在移动HTML上正常工作，但不在桌面上(第二个1(。我没有任何错误，一切似乎都很好。我缺少什么？

Answer 1

修复了js无法处理1个函数上两个独立的输入字段的问题。为桌面和手机制作了文本输入。我的错误！

Answer 2

尝试验证您的代码。

在mobileone中，h2上有一个样式属性，没有双引号。

在桌面一上，您又添加了一个双引号。

否则，JS似乎运行良好。：(

验证代码：

<div class="search-wrapper">
<input class="searchInput TextFilter-mobile" type="text" onkeyup="searchFunction()" placeholder="Zoeken..">
</div>
<div class="card card-filterDiv zuivel special">
<div class="card-horizontal">
<div class="image-wrapper">
<img class="clip-product-img-mobile" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap" />
<button class="btn btn-success">
<i class="fas fa-cart-plus add-to-cart-icon"></i>
</button>
</div>
<div class="card-body">
<h2 class="food card-title mr-0" style="">Bokkenpootjes</h2>
</div>
</div>
</div>

<div class="card card-filterDiv special zuivel">
<img class="card-img-top clip-product-img-desktop" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap">
<button class="btn btn-success">
<i class="fas fa-cart-plus add-to-cart-icon"></i>
</button>
<div class="card-body">
<h2 class="food card-title mr-0">Bokkenpootjes</h2>
</div>
</div>