My issue lies in figuring out why my filter function isn't properly working for toggling li elements.
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>Desired effect:
I'm aiming for a simple search box functionality, but the list items aren't reacting as expected. When I experiment with code like this:
$("#menulist span").filter(...)
All span elements toggle based on the search value, however, my goal is to hide the li elements that do not match the search value. There seems to be something missing, but what could it be?