as the title states I am trying to implement a fluentsearch input box that has an oninput event that fires off the SearchEmployees method everytime the user types into the input. for reasons unknown, the input box does not allow me to type anything. Basically when I enter a keystroke, it clears the input box, not allowing me to type anything into it. I did notice that if I use the bind-value:after directive and assign SearchEmployees to that, it works, the problem as that I dont want the user to have to hit enter to fire off the method, I want it to be on every keystroke
@page "/Sandbox"
@inject IDbContextFactory<SFSChecklistContext> _contextFactory
@using Microsoft.AspNetCore.Components.Web
<AuthorizeView Policy="SuperAdmin">
<Authorized>
<!-- Input field with searchEmployees method -->
</Authorized>
<NotAuthorized>
<FluentSearch @ref=searchTest
@bind-Value="@inputValue"
Placeholder="Search for Employee"
@oninput="SearchEmployees"
/>
<br />
<ul>
@foreach (var employee in FilteredEmployees)
{
<li>@employee.FirstName @employee.LastName</li>
}
</ul>
<p>
You searched for: @inputValue
</p>
</NotAuthorized>
</AuthorizeView>
@code {
private string? inputValue;
private bool isSearching;
private FluentSearch? searchTest;
private List<Employee> FilteredEmployees { get; set; } = new List<Employee>();
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
}
private async Task SearchEmployees()
{
if (!string.IsNullOrWhiteSpace(inputValue))
{
using (var _context = await _contextFactory.CreateDbContextAsync())
{
EmployeeRepo repo = new EmployeeRepo(_context);
FilteredEmployees = await repo.SearchEmployeesAsync(inputValue);
}
}
else
{
FilteredEmployees.Clear();
}
// Update the UI after the search operation
StateHasChanged();
}
}
I have tried implementing both the oninput and bind-value:after directives , I want the user to be able to see the results of the UL change as they type into the input field