Autocomplete

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.

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.Components

Example

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="true">
    <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; }
}

Multiple

Selected Values: AE,AL
Selected Texts:
<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="true">
    <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();
}

ItemContent

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="true">
    <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
ChangeTextOnKeyPress If true the text in will be changed after each key press (overrides global settings). bool? null
DelayTextOnKeyPress If true the entered text will be slightly delayed before submitting it to the internal value. bool? null
DelayTextOnKeyPressInterval 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
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>>