How to make a live search bar from replicated divs in MVC?

Viewed 18

I'm trying to create a live search bar which filters out results as the user is typing. My home page shows a list of employees which is being received from my EmployeeModel.cs via the HomeController.cs.

Below is my index.cshtml code which is repeating the div for every employee in the database:

<div class="row">
        @foreach (var e in Model)
        {
            <div class="card">
                <img src="..." class="card-img-top">
                <div class="card-body">

                    <h5 class="pt-2 fw-bold card-title">@e.FirstName @e.LastName</h5>
                    <hr>
                    <p class="fw-bolder card-text">@e.SubDivision.Name</p>
                    <p class="card-text">@e.Role.Description</p>
                </div>
                <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="btn btn-outline-secondary w-100 mb-3">Details</a>
            </div>
        }
    </div>
0 Answers
Related