Blazorise Autocomplete component

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

See Autocomplete specifications for behavior details and edge cases.

📊 The Community License has a limitation of 1000 items. Unlock full access to all features with our premium plans.

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.

To use the Autocomplete component, install the Blazorise.Components package first.

Installation

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

NuGet

Install extension from NuGet.

Install-Package Blazorise.Components

Imports

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 )">
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
</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..."
        SelectionMode="AutocompleteSelectionMode.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: @(multipleSelectionTexts == null ? null : 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;
}

Validation (single)

Wrap the Autocomplete in a Validation container to integrate with the standard validation system.

Country

<Validations @ref="validations" Mode="ValidationMode.Manual">
    <Validation Validator="@ValidationRule.IsNotEmpty">
        <Field>
            <FieldLabel>Country</FieldLabel>
            <FieldBody>
                <Autocomplete TItem="Country"
                              TValue="string"
                              Data="@Countries"
                              TextField="@(( item ) => item.Name)"
                              ValueField="@(( item ) => item.Iso)"
                              Placeholder="Select a country"
                              @bind-SelectedValue="@selectedCountry">
                    <Feedback>
                        <ValidationError>Please select a country.</ValidationError>
                    </Feedback>
                </Autocomplete>
            </FieldBody>
        </Field>
    </Validation>
    <Button Color="Color.Primary" Clicked="@Validate">Validate</Button>
</Validations>

@code {
    [Inject]
    public CountryData CountryData { get; set; }

    public IEnumerable<Country> Countries;

    Validations validations;

    string selectedCountry;

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

    async Task Validate()
    {
        await validations.ValidateAll();
    }
}

Validation (multiple)

When using AutocompleteSelectionMode.Multiple, validate the SelectedValues list to enforce at least one selection.

Countries

<Validations @ref="validations" Mode="ValidationMode.Manual">
    <Validation Validator="@ValidateSelection">
        <Field>
            <FieldLabel>Countries</FieldLabel>
            <FieldBody>
                <Autocomplete TItem="Country"
                              TValue="string"
                              Data="@Countries"
                              TextField="@(( item ) => item.Name)"
                              ValueField="@(( item ) => item.Iso)"
                              SelectionMode="AutocompleteSelectionMode.Multiple"
                              Placeholder="Select countries"
                              @bind-SelectedValues="@selectedCountries">
                    <Feedback>
                        <ValidationError>Please select at least one country.</ValidationError>
                    </Feedback>
                </Autocomplete>
            </FieldBody>
        </Field>
    </Validation>
    <Button Color="Color.Primary" Clicked="@Validate">Validate</Button>
</Validations>

@code {
    [Inject]
    public CountryData CountryData { get; set; }

    public IEnumerable<Country> Countries;

    Validations validations;

    List<string> selectedCountries = new List<string>();

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

    void ValidateSelection( ValidatorEventArgs validationArgs )
    {
        List<string> values = validationArgs.Value as List<string>;

        validationArgs.Status = values != null && values.Count > 0
            ? ValidationStatus.Success
            : ValidationStatus.Error;
    }

    async Task Validate()
    {
        await validations.ValidateAll();
    }
}

Validation (data annotations)

Use ValidationMode.Auto with a model decorated with data annotations to validate single and multiple selections.

Country

Please select a country.

Countries

Please select at least one country.

@using System.ComponentModel.DataAnnotations

<Validations Mode="ValidationMode.Auto" Model="@model">
    <Validation>
        <Field>
            <FieldLabel>Country</FieldLabel>
            <FieldBody>
                <Autocomplete TItem="Country"
                              TValue="string"
                              Data="@Countries"
                              TextField="@(( item ) => item.Name)"
                              ValueField="@(( item ) => item.Iso)"
                              Placeholder="Select a country"
                              @bind-SelectedValue="@model.CountryIso">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </Autocomplete>
            </FieldBody>
        </Field>
    </Validation>
    <Validation>
        <Field>
            <FieldLabel>Countries</FieldLabel>
            <FieldBody>
                <Autocomplete TItem="Country"
                              TValue="string"
                              Data="@Countries"
                              TextField="@(( item ) => item.Name)"
                              ValueField="@(( item ) => item.Iso)"
                              SelectionMode="AutocompleteSelectionMode.Multiple"
                              Placeholder="Select countries"
                              @bind-SelectedValues="@model.CountryIsos">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </Autocomplete>
            </FieldBody>
        </Field>
    </Validation>
</Validations>

@code {
    [Inject]
    public CountryData CountryData { get; set; }

    public IEnumerable<Country> Countries;

    AutocompleteValidationModel model = new AutocompleteValidationModel();

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

    public class AutocompleteValidationModel
    {
        [Required( ErrorMessage = "Please select a country." )]
        public string CountryIso { get; set; }

        [MinLength( 1, ErrorMessage = "Please select at least one country." )]
        public List<string> CountryIsos { get; set; } = new List<string>();
    }
}

Searching with data on demand (ReadData)

Frequently, you'll want to read data on demand rather than loading everything into memory at startup. You can do it with the ReadData API. It will provide you with enough information for you to call an external data-source, which will return new data, which you can then reassign to the Data parameter.

Note: Make sure to check the CancellationToken before commiting your values to Data. This will make sure to avoid race conditions and keep your Data updated according to the user's last key stroke.

Selected search value:

Selected text value:

<Autocomplete TItem="Country"
              TValue="string"
              Data="@ReadDataCountries"
              ReadData="@OnHandleReadData"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="selectedAutoCompleteText"
              Placeholder="Search..."
              FreeTyping>
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
</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;
    public IEnumerable<Country> ReadDataCountries;

    private Random random = new();

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

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

    private async Task OnHandleReadData( AutocompleteReadDataEventArgs autocompleteReadDataEventArgs )
    {
        if ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
        {
            await Task.Delay( random.Next( 100 ) );
            if ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
            {
                ReadDataCountries = Countries.Where( x => x.Name.StartsWith( autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase ) );
            }
        }
    }
}

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 )">
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
    <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; }
}

Suggesting already selected items && Checkbox support

Enabling `AutocompleteSelectionMode.Checkbox` adds checkboxes to all items in the autocomplete menu, while also keeping previously selected items visible. Note: Make sure to set CloseOnSelection to false if you want to keep the dropdown open whenever an item is selected.

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..."
        SelectionMode="AutocompleteSelectionMode.Checkbox"
        CloseOnSelection="false"
        @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: @(multipleSelectionTexts == null ? null : 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;
}

Highlight search text

Autocomplete HighlightSearch is a feature that allows you to highlight the search text that you have entered in a dropdown list of items. When you start typing in the search field, the dropdown list of items will automatically be filtered to show only the items that match the search text. The search text will also be highlighted in the dropdown list of items, so that you can easily see which items match your search. This can be a useful feature when you are trying to find a specific item in a long list of items, as it allows you to quickly locate the item you are looking for.

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              Placeholder="Search..."
              HighlightSearch>
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
</Autocomplete>

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

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

Virtualize

Blazorise Autocomplete's Virtualize feature allows for loading data on demand while scrolling, which improves the performance of the component when working with large datasets. With Virtualize, the Autocomplete component only loads the items that are currently visible in the list, and as the user scrolls, more items are loaded in the background. This allows for a much faster and smoother user experience, especially when working with large lists of items.

This feature can be easily enabled by setting the Virtualize property to "true" on the Autocomplete component.

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@((item) => item.Iso)"
              @bind-SelectedValue="selectedSearchValue"
              Placeholder="Search..."
              Virtualize>
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
</Autocomplete>

@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; }
}

Virtualize with ReadData

Blazorise Autocomplete's Virtualize and ReadData features work together to handle large datasets efficiently. The ReadData event allows you to load only the data needed for the current interaction, without loading the entire dataset into memory. Meanwhile, the Virtualize property ensures that only the visible items are rendered in the DOM, significantly improving performance when working with large lists.

In the provided example, the dataset is represented using IEnumerable for simplicity, but in real-world scenarios, you would typically use IQueryable. This allows for true deferred execution, ensuring only the required data is fetched and processed.

To enable Virtualize with ReadData, you must also set the TotalItems property. The TotalItems value represents the total count of items in your dataset and is required for proper virtualization.

<Autocomplete TItem="Country"
              TValue="string"
              Data="@ReadDataCountries"
              TotalItems="totalCountries"
              TextField="@(( item ) => item.Name)"
              ValueField="@((item) => item.Iso)"
              @bind-SelectedValue="@SelectedSearchValue"
              Placeholder="Search..."
              Virtualize
              ReadData="@OnHandleReadData">
    <NotFoundTemplate> Sorry... @context was not found! :( </NotFoundTemplate>
</Autocomplete>

@code {
    [Inject]
    public CountryData CountryData { get; set; }

    public IEnumerable<Country> Countries;
    IEnumerable<Country> ReadDataCountries;
    int totalCountries;

    public string SelectedSearchValue { get; set; }

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

    private Task OnHandleReadData( AutocompleteReadDataEventArgs autocompleteReadDataEventArgs )
    {
        if ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
        {
            ReadDataCountries = Countries
                .Where(x => x.Name.StartsWith(autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase))
                .Skip(autocompleteReadDataEventArgs.VirtualizeOffset).Take(autocompleteReadDataEventArgs.VirtualizeCount);
        }

        return Task.CompletedTask;
    }
}

API

Parameters

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`AutoPreSelect`	Gets or sets whether Autocomplete auto preselects the first item displayed on the dropdown. Defauls to true.	`bool`	`true`
`AutoSelectFirstItem`	Gets or sets the whether first item in the list should be selected	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this Autocomplete.	`RenderFragment`	`null`
`Classes`	Custom CSS class names for component elements.	`TClasses`	`null`
`CloseOnSelection`	Specifies whether Autocomplete dropdown closes on selection. This is only evaluated when multiple selection is set. Defauls to true.	`bool`	`true`
`CloseParentDropdowns`	Gets or sets a value indicating whether parent dropdown menus should be closed when this component is activated. Remarks Set this property to to automatically close any open parent dropdowns when the component is triggered. This can be useful for ensuring only one dropdown is open at a time in nested menu scenarios.	`bool`	`false`
`ConfirmKey`	Gets or sets an array of the keyboard pressed values for the ConfirmKey. If this is null or empty, there will be no confirmation key. Defauls to: { "Enter", "NumpadEnter", "Tab" }. Remarks If the value has a printed representation, this attribute's value is the same as the char attribute. Otherwise, it's one of the key value strings specified in 'Key values'.	`string[]`	`new[] { "Enter", "NumpadEnter" }`
`Data`	Gets or sets the autocomplete data-source.	`IEnumerable<TItem>`	`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`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Filter`	Defines the method by which the search will be done. Possible values:`StartsWith`, `Contains`	`AutocompleteFilter`	`AutocompleteFilter.StartsWith`
`FreeTyping`	Allows the value to not be on the data source. The value will be bound to the SelectedText	`bool`	`false`
`FreeTypingNotFoundTemplate`	Specifies the not found content to be rendered inside this Autocomplete when no data is found and FreeTyping is enabled.	`RenderFragment<string>`	`null`
`HighlightSearch`	If true, the searched text will be highlighted in the dropdown list items based on Search value.	`bool`	`false`
`Immediate`	If true the text in will be changed after each key press. Remarks Note that setting this will override global settings in Immediate.	`bool?`	`null`
`ItemContent`	Specifies the item content to be rendered inside each dropdown item.	`RenderFragment<ItemContext<TItem, TValue>>`	`null`
`MaxEntryLength`	Specifies the maximum number of characters allowed in the input element.	`int?`	`null`
`MaxMenuHeight`	Sets the maximum height of the dropdown menu.	`string`
`MinSearchLength`	The minimum number of characters a user must type before a search is performed. Set this to 0 to make the Autocomplete function like a dropdown.	`int`	`1`
`MultipleBadgeColor`	Sets the Badge color for the multiple selection values. Used when multiple selection is set.	`Color`	`Primary`
`MultipleDisabledBadgeColor`	Sets the disabled Badge color for the multiple selection values. Used when multiple selection is set.	`Color`	`Light`
`NotFoundTemplate`	Specifies the not found template to be rendered inside this Autocomplete when no data is found.	`RenderFragment<string>`	`null`
`Placeholder`	Sets the placeholder for the empty search.	`string`
`PositionStrategy`	Defines the positioning strategy of the dropdown menu as a 'floating' element. Possible values:`Absolute`, `Fixed`	`DropdownPositionStrategy`	`Absolute`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`Search`	Gets or sets the currently selected item text.	`string`
`SearchBackground`	Defines the background color of the search field.	`Background`	`null`
`SearchClass`	Defines class for search field.	`string`
`SearchStyle`	Defines style for search field.	`string`
`SearchTextColor`	Defines the text color of the search field.	`TextColor`	`null`
`SelectedText`	Gets or sets the currently selected item text.	`string`
`SelectedTexts`	Currently selected items texts. Used when multiple selection is set.	`List<string>`	`null`
`SelectedValue`	Currently selected item value.	`TValue`	`null`
`SelectedValueExpression`	Gets or sets an expression that identifies the selected value.	`Expression<Func<TValue>>`	`null`
`SelectedValues`	Currently selected items values. Used when multiple selection is set.	`List<TValue>`	`null`
`SelectedValuesExpression`	Gets or sets an expression that identifies the selected values. Used when multiple selection is set.	`Expression<Func<List<TValue>>>`	`null`
`SelectionMode`	Gets or sets the Autocomplete Selection Mode. Possible values:`Default`, `Multiple`, `Checkbox`	`AutocompleteSelectionMode`	`AutocompleteSelectionMode.Default`
`Size`	Sets the size of the input control.	`Size?`	`null`
`Styles`	Custom inline styles for component elements.	`TStyles`	`null`
`SuggestSelectedItems`	Suggests already selected option(s) when presenting the options.	`bool`	`false`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`TagTemplate`	Specifies the content to be rendered for each tag (multiple selected item).	`RenderFragment<AutocompleteTagContext<TItem, TValue>>`	`null`
`TotalItems`	Gets or sets the total number of items. Used only when ReadData and Virtualize is used to load the data. Remarks This field must be set only when ReadData and Virtualize is used to load the data.	`int?`	`null`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`
`Virtualize`	Gets or sets whether the Autocomplete will use the Virtualize functionality.	`bool`	`false`

Events

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`Closed`	Event handler used to detect when the autocomplete is closed.	`EventCallback<AutocompleteClosedEventArgs>`
`CustomFilter`	Handler for custom filtering on Autocomplete's data source.	`Func<TItem, string, bool>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`DisabledItem`	Method used to get the determine if the item should be disabled.	`Func<TItem, bool>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`NotFound`	Occurs on every search text change where the data does not contain the text being searched.	`EventCallback<string>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`Opened`	Event handler used to detect when the autocomplete is opened.	`EventCallback`
`ReadData`	Event handler used to load data manually based on the current search value.	`EventCallback<AutocompleteReadDataEventArgs>`
`SearchBlur`	The blur event fires when the search box has lost focus.	`EventCallback<FocusEventArgs>`
`SearchChanged`	Occurs on every search text change.	`EventCallback<string>`
`SearchFocus`	Occurs when the search box gains or loses focus.	`EventCallback<FocusEventArgs>`
`SearchKeyDown`	Occurs when a key is pressed down while the search box has focus.	`EventCallback<KeyboardEventArgs>`
`SearchTextChanged`	Occurs after the search box text has changed.	`EventCallback<string>`
`SelectedTextChanged`	Gets or sets the currently selected item text.	`EventCallback<string>`
`SelectedTextsChanged`	Occurs after the selected texts have changed. Used when multiple selection is set.	`EventCallback<List<string>>`
`SelectedValueChanged`	Occurs after the selected value has changed.	`EventCallback<TValue>`
`SelectedValuesChanged`	Occurs after the selected values have changed. Used when multiple selection is set.	`EventCallback<List<TValue>>`
`TextField`	Method used to get the display field from the supplied data source.	`Func<TItem, string>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`
`ValueField`	Method used to get the value field from the supplied data source.	`Func<TItem, TValue>`

Methods

Method	Description	Return	Parameters
`ScrollItemIntoView`	Scrolls an item into view.	`Task`	`int index`
`Reload`	Triggers the reload of the Autocomplete data. Makes sure not to reload if the Autocomplete is in a loading state.	`Task`	`CancellationToken cancellationToken`
`AddMultipleTextAndValue`	Adds a Multiple Selection.	`Task`	`TValue value`
`RemoveMultipleTextAndValue`	Removes a Multiple Selection.	`Task`	`string text`
`RemoveMultipleTextAndValue`	Removes a Multiple Selection.	`Task`	`TValue value`
`ResetSelected`	Clears the current selection.	`Task`
`Clear`	Clears the selected value and the search field.	`Task`
`Close`	Closes the Autocomplete Dropdown.	`Task`
`Close`	Closes the Autocomplete Dropdown.	`Task`	`CloseReason closeReason`
`OpenDropdown`	Opens the Autocomplete Dropdown.	`Task`
`IsSelectedvalue`	Gets whether the is selected.	`bool`	`TValue value`
`IsSelectedItem`	Gets whether the is selected.	`bool`	`TItem item`
`GetItemByValue`	Gets a from Data by using the provided ValueField.	`TItem`	`TValue value`
`GetItemByText`	Gets a from Data by using the provided TextField.	`TItem`	`string text`
`GetItemsByText`	Gets multiple items from Data by using the provided TextField.	`IEnumerable<TItem>`	`string text`
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`

Blazorise Autocomplete component

Installation

NuGet

Imports

Examples

Searching single value

Searching multiple values

Validation (single)

Validation (multiple)

Validation (data annotations)

Searching with data on demand (ReadData)

Extending with custom item content

Suggesting already selected items && Checkbox support

Highlight search text

Virtualize

Virtualize with ReadData

API

Parameters

Events

Methods

On this page