Jquery 按内部元素的文本切换列表元素

Question

我无法找出为什么我的筛选函数不能在li元素上进行切换。

---

JavaScript：

$("#searchbox1").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#menulist li").filter(function() {
$(this).toggle($(this).children("span").text().toLowerCase().indexOf(value) > -1)
});
});  

---

HTML：

<ul name="menulist" id="menulist" class="list-group grid-container">
<li class="list-group-item d-flex flex-row justify-content-center align-items-center">
<span>Yeni ürün ekle</span>
<div class="btn-group btn-group-sm ml-auto" role="group">
<a class="btn btn-success" href="/restaurant/additem">
<i class="fas fa-plus"></i>
</a>
</div>
</li>
<li name="bira" class="list-group-item d-flex flex-row justify-content-center align-items-center">
<span>bira</span>
<div class="btn-group btn-group-sm ml-auto" role="group">
<a href="/restaurant/edititem/-10" class="btn btn-success"><span class="fas fa-edit"></span></a>
<a href="/restaurant/delete/-10" class="btn btn-danger"><span class="fas fa-trash-alt"></span></a>
</div>
</li>
<li name="patates kızartması" class="list-group-item d-flex flex-row justify-content-center align-items-center">
<span>patates kızartması</span>
<div class="btn-group btn-group-sm ml-auto" role="group">
<a href="/restaurant/edititem/-11" class="btn btn-success"><span class="fas fa-edit"></span></a>
<a href="/restaurant/delete/-11" class="btn btn-danger"><span class="fas fa-trash-alt"></span></a>
</div>
</li>
</ul>

---

所需效果：

我只是想要一个简单的搜索框效果，但列表项目不会去任何地方。当我玩这样的代码时：

$("#menulist span").filter(...)

我可以看到所有span元素根据搜索值进行切换，但我想隐藏与搜索值不匹配的li元素。我错过了什么，但是什么？

Answer 1

您的过滤代码实际上很到位！因此没有必要更改任何JavaScript。

---

那么问题出在哪里呢

您的li元素都具有Bootstrap 4类d-flex。这是一个问题，因为在筛选列表时，它会给出与CSSdisplay: none;不匹配的元素。但是，由于d-flex是!important值，因此无法应用此项。这意味着每当您的代码试图将li设置为display: none时，它将被d-flex添加的display: flex !important属性覆盖。

---

那么我该如何解决这个问题呢

通过从所有li元素中删除d-flex类，并使用一些自定义CSS将它们设置为display: flex;。

.list-group-item {
display: flex;
}

---

示例：

请参阅JSFiddle上的固定版本。