Dynamiczna filtracja listy w jquery

Cześć,

Próbuję posortować sobie wygenerowaną dynamicznie listę produktów w taki sposób, aby filtracji podlegała również kategoria, jednak nie mam pomysłu jak to ogarnąć. Macie pomysł jak to ogarnąć ?

  <input type="text" id="search-text" class="form-control input-lg" placeholder="Szukaj">
<ul>
    @foreach (var productCategory in Model)
    {
        <li>
            <h2>@productCategory.Name</h2>

            <ul id="list" class="list-group">
                @foreach (var product in productCategory.Products)
                {
                    <li class="listli">
                        @Html.DisplayFor(modelItem => product.Name)
                    </li>
                }
            </ul>          
        </li>
    }
</ul>

$(document).ready(function () {

    $("#search-text").keyup(function () {

        var searchTerm = $("#search-text").val();

        var listItem = $('#list li');


        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        //extends :contains to be case insensitive
        $.extend($.expr[':'], {
            'containsi': function (elem, i, match, array) {
                return (elem.textContent || elem.innerText || '').toLowerCase()
                    .indexOf((match[3] || "").toLowerCase()) >= 0;
            }
        });


        //here is the meat. We are searching the list based on the search terms
        $("#list li").not(":containsi('" + searchSplit + "')").each(function (e) {

            //add a "hidden" class that will remove the item from the list
            $(this).addClass('hidden');
                   
        });


        //this does the opposite -- brings items back into view
        $("#list li:containsi('" + searchSplit + "')").each(function (e) {

            //remove the hidden class (reintroduce the item to the list)
            $(this).removeClass('hidden');

        });
    });
});

Zmień troszkę strukturę html, id=list powinno być na głównym nodzie listy:

<ul id="list" >
    @foreach (var productCategory in Model)
    {
        <li>
            <h2>@productCategory.Name</h2>
 
            <ul class="list-group">
                @foreach (var product in productCategory.Products)
                {
                    <li class="listli">
                        @Html.DisplayFor(modelItem => product.Name)
                    </li>
                }
            </ul>          
        </li>
    }
</ul>