Blazorise Autocomplete component

The Autocomplete component offers simple and flexible type-ahead functionality.

The Autocomplete component provides suggestions while you type into the field. The component is in essence a text box which, at runtime, filters data in a drop-down by a Filter operator when a user captures a value. You may also enable FreeTyping and AutoComplete can be used to just provide suggestions based on user input.

Quick Installation

The Autocomplete extension is part of the Blazorise.Components NuGet package.

Step 1: Download from NuGet

Install extension from NuGet:

Install-Package Blazorise.Components

Step 2. Define Usings

In your main _Imports.razor add:

@using Blazorise.Components

Examples

Searching single value

Selected search value:

Selected text value:

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

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected search value: @selectedSearchValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text value: @selectedAutoCompleteText
    </FieldBody>
</Field>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    public string selectedSearchValue { get; set; }
    public string selectedAutoCompleteText { get; set; }
}

Searching multiple values

Selected Values: AE,AL

Selected Texts: United Arab Emirates,Albania

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              Placeholder="Search..."
              Multiple
              FreeTyping
              @bind-SelectedValues="multipleSelectionData"
              @bind-SelectedTexts="multipleSelectionTexts">
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Values: @string.Join(',', multipleSelectionData)
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Texts: @string.Join(',', multipleSelectionTexts)
    </FieldBody>
</Field>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        multipleSelectionData = new List<string>() { Countries.ElementAt( 1 ).Iso, Countries.ElementAt( 3 ).Iso };
        await base.OnInitializedAsync();
    }

    List<string> multipleSelectionData;
    List<string> multipleSelectionTexts = new();
}

Extending with custom item content

Customize the way you display the Autocomplete items by providing ItemContent.

Selected search value:

Selected text value:

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="selectedAutoCompleteText"
              Placeholder="Search..."
              Filter="AutocompleteFilter.StartsWith"
              FreeTyping
              CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
    <ItemContent>
        <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
            <Heading Margin="Margin.Is2.FromBottom">@context.Value</Heading>
            <Small>@context.Item.Capital</Small>
        </Div>
        <Paragraph Margin="Margin.Is2.FromBottom">@context.Text</Paragraph>
    </ItemContent>
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected search value: @selectedSearchValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text value: @selectedAutoCompleteText
    </FieldBody>
</Field>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
    string selectedSearchValue { get; set; }
    string selectedAutoCompleteText { get; set; }
}

Attributes

Name	Description	Type	Default
`TItem`	Model data type.	`generic`
`Data`	Data used for the search.	`IEnumerable<TItem>`
`TextField`	Selector for the display name field.	`Func`
`ValueField`	Selector for the value field.	`Func`
`SelectedValue`	Currently selected value.	`object`
`SelectedValueChanged`	Raises an event after the selected value has changed.	`EventCallback<string>`
`SelectedText`	Currently selected text.	`string`
`SelectedTextChanged`	Raises an event after the selected text has changed.	`EventCallback<string>`
`SearchChanged`	Occurs on every search text change.	`EventCallback<string>`
`Placeholder`	Placeholder for the empty search field.	`string`
`MinLength`	Minimum number of character needed to start search.	`int`	`1`
`MaxMenuHeight`	Sets the maximum height of the dropdown menu.	`string`	`200px`
`Filter`	Filter method used to search the data.	`enum`	`StartsWith`
`Disabled`	Disable the input field.	`bool`	`false`
`Immediate`	If true the text in will be changed after each key press (overrides global settings).	`bool?`	`null`
`Debounce`	If true the entered text will be slightly delayed before submitting it to the internal value.	`bool?`	`null`
`DebounceInterval`	Interval in milliseconds that entered text will be delayed from submitting to the internal value.	`int?`	`null`
`Validator`	Validation handler used to validate selected value.	`Action<ValidatorEventArgs>`	`null`
`AsyncValidator`	Asynchronously validates the selected value.	`Func<ValidatorEventArgs, CancellationToken, Task>`	`null`
`NotFoundContent`	Render fragment when no value has been found on the data source.	`RenderFragment<string>`
`NotFound`	Raises an event when no value has been found on the data source.	`EventCallback<string>`
`FreeTyping`	Allows the value to not be on the data source.	`bool`	`false`
`CustomFilter`	Handler for custom filtering on Autocomplete’s data source.	`Func<TItem, string, bool>`
`Multiple`	Allows for multiple selection.	`bool`	`false`
`MultipleBadgeColor`	Sets the Badge color for the multiple selection values.	`Color`	`Color.Primary`
`SelectedValues`	Currently selected items values.	`List<TValue>`
`SelectedValuesChanged`	Occurs after the selected values have changed.	`EventCallback<List<TValue>>`
`SelectedTexts`	Currently selected items texts.	`List<string>`
`SelectedTextsChanged`	Occurs after the selected texts have changed.	`EventCallback<List<string>>`
`ItemContent`	Specifies the item content to be rendered inside each dropdown item.	`RenderFragment<ItemContext<TItem,TValue>>`
`CloseOnSelection`	Specifies whether Autocomplete's dropdown closes on selection. This is only evaluated when the Autocomplete's Multiple is set to true. Defauls to true.	`bool`	`true`