how to filter child elements in jquery

trying to create a search filter based on an list in a razor view:

<input class="form-control" id="foodSearch" type="text" placeholder="Search here...">
<br>
<ul class="list-group" id="foods">
    @foreach (var f in @Model)
    {
        <li>
            <div id="food">
                <p">@f.Name</p>
                <small>@f.prepTime, @f.price </small>
            </div>
        </li>

    }
</ul>


$("#foodSearch").on("keyup", function () {
        var value = $(this).val().toLowerCase();
    $("#foods li div").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

so essentially I am trying to filter based on the values contained within the ‘p’ and ‘small’ tags, and then only that ‘parent’ div be left in the search