Filtrowanie/wyszukiwanie listy zakładek

Cześć,

Mam problem z filtrowaniem listy, którą przekazuję w modelu. Chciałbym aby po wpisaniu w pole searchBox użytkownikowi wyświetlały się tylko te zakładki, które odpowiadają wynikowi %like% w searchBox.

Poniżej html z zastosowanym skryptem

@model Application.ViewModels.IndexSearchListModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Strona główna</h1>

<div class="md-form mt-0">
    <input id="searchBox" onkeyup="searchFunction()" title="Wprowadź nazwę salonu..." class="form-control" type="text" placeholder="Wyszukaj salon..." aria-label="Search">
</div>
<br />

<div class="row">
    <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
            @foreach (var workplace in Model.Workplaces)
            {
                <a class="list-group-item list-group-item-action" id="[email protected]" data-toggle="list" href="#[email protected]" role="tab" aria-controls="home">@workplace.Name</a>
            }
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content" id="nav-tabContent">
            @foreach (var workplace in Model.Workplaces)
            {
                <div class="tab-pane" id="[email protected]" role="tabpanel" aria-labelledby="[email protected]">
                    <p>@workplace.Name</p>
                    
                </div>
            }
            </div>
    </div>
</div>

<script>
    function searchFunction() {
        // Declare variables
        var input, filter, list, listgroup, tabs, i, txtValue;
        input = document.getElementById("searchBox");
        filter = input.value.toUpperCase();
        list = document.getElementById("list-tab");
        listgroup = list.getElementsByClassName("list-group-item list-group-item-action");

        // Loop through all list tabs, and hide those who don't match the search query
        for (i = 0; i < listgroup.length; i++) {
            tabs = listgroup[i].getElementsByTagName("a")[0];
            if (tabs) {
                txtValue = tabs.textContent || tabs.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    listgroup[i].style.display = "";
                } else {
                    listgroup[i].style.display = "none";
                }
            }
        }
    }
</script>

Akurat zdecydowałem się na te zakładki, ponieważ fajnie wyglądają na froncie, nie wiem tylko czy jeśli wyników będzie większa ilość (np. 40) to czy "tabpanel" po kliknięciu ostatniej zakładki pojawi się obok, czy na samej górze...