Chandradev's Blog

@page "/"
@using Blazorise.Components

<Autocomplete TItem="Countries"
              TValue="string"
              Data="@LocalData"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Code)"
              Placeholder="Search..."
              Filter="AutocompleteFilter.StartsWith"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="selectedAutoCompleteText"
              FreeTyping
              CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
</Autocomplete>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Clear Text</button>

@code
{
    public string? selectedSearchValue { get; set; }
    public string? selectedAutoCompleteText { get; set; }

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Countries> LocalData = new List<Countries> {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" }
    };

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        this.selectedAutoCompleteText = string.Empty;
    }
}