Blazor Auto Complete

Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.

Client side data#

Client side data with StringComparision#

In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
INFO
By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.

Server side data#

Set default value#

Validations#

Keyboard Navigation#

Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions.
Key Description
Esc Closes the popup list when it is in an open state.
Up arrow Focuses on the previous item in the list.
Down arrow Focuses on the next item in the list.
Home Focuses on the first item in the list.
End Focuses on the last item in the list.
Enter Selects the currently focused item.

Disable#

Use the Disabled parameter to disable the AutoComplete.
razor
<div class="row mb-3">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer2"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      Disabled="@disabled"
                      OnChanged="(Customer2 customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>

@code {
    private string customerName = default!;
    private bool disabled = true;

    [Inject] ICustomerService _customerService { get; set; } = default!;

    private async Task<AutoCompleteDataProviderResult<Customer2>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer2> request)
    {
        var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer2> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer2 customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}
Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
razor
<div class="row mb-3">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @ref="autoComplete1" 
                      @bind-Value="customerName"
                      TItem="Customer2"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      OnChanged="(Customer2 customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>

@code {
    private AutoComplete<Customer2> autoComplete1 = default!;
    private string customerName = default!;

    [Inject] ICustomerService _customerService { get; set; } = default!;

    private async Task<AutoCompleteDataProviderResult<Customer2>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer2> request)
    {
        var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer2> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer2 customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }

    private void Disable() => autoComplete1.Disable();

    private void Enable() => autoComplete1.Enable();
}

Sizing#