Blazor Client Side Search

@page "/clientsidesearch"
@using MyApp01.Client.Models;
 
<input @bind-value="SearchTerm" @bind-value:event="oninput" />

<span class="text-muted ml-5">
    Showing @FilteredToDos.Count out of @ToDoItems.Count
</span>

<h4 class="mt-4">To Do's</h4>
<ul>
    @foreach (var toDo in FilteredToDos)
    {
        <li>@toDo.Name</li>
    }
</ul>

@code {
    // Initialize SearchTerm to "" to prevent null's
    string SearchTerm { get; set; } = "";

    // Imagine this was retrieved from an API, just hardcoding for demo purposes
    List<ToDoItem> ToDoItems => new List<ToDoItem>
{
        new ToDoItem { Name = "Garbage" },
        new ToDoItem { Name = "Dishes" },
        new ToDoItem { Name = "Wash clothes" },
        new ToDoItem { Name = "Water flowers" }
    };

    List<ToDoItem> FilteredToDos => ToDoItems.Where(i => i.Name.ToLower().Contains(SearchTerm.ToLower())).ToList();
}

Sources:

Blazor: Implementing Client Side Search As You Type Using bind-value:event