Autocomplete extension

Basics

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.

Installation

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

NuGet

Install extension from NuGet.

Install-Package Blazorise.Components

Usage

Markup

<Autocomplete Data="@myDdlData"
    TextField="@((item)=>item.MyTextField)"
    ValueField="@((item)=>item.MyTextField)"
    SelectedValue="@selectedSearchValue"
    SelectedValueChanged="@MySearchHandler"
    Placeholder="Search..." />

Data binding

@code{
    public class MySelectModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" };
    IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } );

    object selectedSearchValue { get; set; }

    void MySearchHandler( object newValue )
    {
        selectedSearchValue = newValue;
    }
}

Attributes

Name	Type	Default	Description
TItem	generic		Model data type.
Data	IEnumerable		Data used for the search.
TextField	Func		Selector for the display name field.
ValueField	Func		Selector for the value field.
SelectedValue	object		Currently selected value.
SelectedValueChanged	event		Raises an event after the selected value has changed.
SearchChanged	event		Occurs on every search text change.
Placeholder	string		Placeholder for the empty search field.
MinLength	int	1	Minimum number of character needed to start search.
Filter	enum	StartsWith	Filter method used to search the data.
Disabled	boolean	false	Disable the input field.
ChangeTextOnKeyPress	bool?	null	If true the text in will be changed after each key press (overrides global settings).
DelayTextOnKeyPress	bool?	null	If true the entered text will be slightly delayed before submitting it to the internal value.
DelayTextOnKeyPressInterval	int?	null	Interval in milliseconds that entered text will be delayed from submitting to the internal value.