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, он будет переопределен свойством display: flex !important, которое добавляет d-flex.

---

Так как мне исправить this?

Удаляя класс d-flex из всех ваших элементов li и устанавливая вместо них display: flex; с некоторыми пользовательскими CSS.

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

---

Пример:

См. Исправленную версию в JSFiddle .