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。这是一个问题，因为在过滤列表时，它会给出与 CSS display: none; 不匹配的元素。但是，由于d-flex 是!important 值，因此无法应用。这意味着每当您的代码尝试将您的 li 设置为 display: none 时，它将被 d-flex 添加的 display: flex !important 属性覆盖。

---

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

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

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

---

示例：

在JSFiddle上查看固定版本。