Selection in AutoComplete

4 Nov 202524 minutes to read

Get selected value

Get the selected value of the AutoComplete component in the ValueChange event using the ChangeEventArgs.Value property.

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></AutoCompleteEvents>
</SfAutoComplete>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };

    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The DropDownList Value is: ", args.Value);
    }

}

Get the complete data object for the selected item in the ValueChange event using the ChangeEventArgs.ItemData property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></AutoCompleteEvents>
</SfAutoComplete>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };

    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The complete data of the selected value is: ", args.ItemData);
    }
}

Preselected value on OnInitializedAsync

Bind a preselected value to the AutoComplete component using the @bind-Value attribute. Assign the value in the OnInitializedAsync lifecycle method. The following sample shows how to bind the value during initial rendering.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
    <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public string ddlValue { get; set; }

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

    protected override async Task OnInitializedAsync()
    {
        ddlValue = "Game4";
    }
}

Blazor AutoComplete showing a preselected value on initial render

Programmatically change the selected value

Change the component value programmatically using the component instance obtained via the @ref attribute. The following sample demonstrates changing the value using the button click event.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfAutoComplete TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
        <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
    </SfAutoComplete>
</div>
<div>
    <SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string ddlValue { get; set; } = "Tennis";

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10",Game= "Tennis"},
    };

    public void OnBtnClick()
    {
        ddlValue = "Cricket";
    }
}

Blazor AutoComplete value changed programmatically using a button

ValueChange event

The ValueChange event is triggered when the value of the AutoComplete component is changed. It provides event arguments that include the current and previously selected values.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" ValueChange="@ValueChangeHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void ValueChangeHandler(ChangeEventArgs<string, GameFields> args)
    {
        // Here, you can customize your code.
    }
}

OnValueSelect event

The OnValueSelect event is triggered when a value is selected in the AutoComplete component. It provides event arguments including ChangeEventArgs.ItemData. Prevent selection by setting ChangeEventArgs.Cancel to true in the event arguments.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" Placeholder="Select a game" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" OnValueSelect="@OnValueSelecthandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void OnValueSelecthandler(SelectEventArgs<GameFields> args)
    {
        // Here, you can customize your code.
    }
}

Preselect value with index

Bind a preselected item by index using the @bind-Index attribute. This binds the value corresponding to the specified index position in the data source.

NOTE

The behavior depends on the SortOrder type. If sorting is applied, the index binds against the sorted data.

The following sample shows how to bind the index during initial rendering.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<SfAutoComplete TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Index="ddlIndex">
    <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public int? ddlIndex { get; set; } = 4;

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
}

Blazor AutoComplete with bind-index selecting an item by position

Autofill the selected value

The Autofill property specifies whether the input automatically suggests and fills the first matched item as the user types, based on the component’s data source. If no match is found, the input is not filled. The default value of Autofill is false.

RAZOR

@using Syncfusion.Blazor.DropDowns


<SfAutoComplete TValue="string" TItem="Games" Autofill=true Placeholder="e.g. Basketball" DataSource="@GamesList">
    <AutoCompleteFieldSettings Value="Game" />
</SfAutoComplete>

@code{

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> GamesList = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

}

Blazor AutoComplete demonstrating the Autofill feature

Get selected item by value

Get the entire data object for the selected value using the GetDataByValue method.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfAutoComplete @ref="autoObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" @bind-Value="@autoValue" DataSource="@LocalData">
        <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
    </SfAutoComplete>
</div>
<div>
    <SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string autoValue { get; set; }

    SfAutoComplete<string, Games> autoObj;

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

    public void OnBtnClick()
    {
        var DropDownValue = autoObj.GetDataByValue(autoValue);
        Console.WriteLine(DropDownValue);
    }
}

Focus the next component on selection

Set focus programmatically using the FocusAsync method. This immediately moves focus to the AutoComplete component when invoked, enabling workflows that shift focus to the next interactive element after selection.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading

<h4>DropDown A</h4>
<SfAutoComplete ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Countries" Closed="@(e => OnClose(e, DropObj2))"></AutoCompleteEvents>
</SfAutoComplete>
<h4>DropDown B</h4>
<SfAutoComplete @ref="DropObj2" ID="dropdown2" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>
@code {
    SfAutoComplete<string, Countries> DropObj2;

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

        public string Code { get; set; }
    }

    List<Countries> Country = 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" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public async Task OnClose(ClosedEventArgs args, SfDropDownList<string, Countries> componentRef)
    {
        Thread tread = new Thread(
             async () =>
             {
                 Thread.Sleep(5);
                 await componentRef.FocusAsync();
             }
          );
        tread.Start();
        await Task.CompletedTask;
    }
}

Prevent reload on form submit

To prevent the page from reloading when the AutoComplete component is used inside a form, set the button type to “button” using the HTMLAttributes property. This prevents the default form submit behavior when the button is clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;

<form>
    <div>
        <label class="example-label">Select a game</label>
        <SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
            <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </div>
    <div class="submit-btn">
        <SfButton HtmlAttributes="@TypeChange" IsPrimary="true">Submit</SfButton>
    </div>
</form> 

@code {
    private Dictionary<string, object> TypeChange = new Dictionary<string, object>() 
    { 
        { "type", "button"} 
    }; 

    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };
}

Programmatically clear the selected value

To clear the AutoComplete value programmatically, use the ClearAsync method. This method clears the selected value from the SfAutocomplete<TValue, TItem> component and sets the Value and Index properties to null.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfAutoComplete @ref="autoObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
        <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
    </SfAutoComplete>
</div>

<div style="margin-top:10px">
    <SfButton Content="Clear the value" OnClick="CrearValue"></SfButton>
</div>


@code {
    
    SfAutoComplete<string, Games> autoObj;

    public string ddlValue { get; set; } = "Tennis";

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10",Game= "Tennis"},
    };

    public void CrearValue()
    {
        autoObj.ClearAsync();
    }
}

Blazor AutoComplete clearing the selected value programmatically

Programmatically trigger onChange event

Trigger the ValueChange event manually by using the instance (taken from @ref) of the AutoCompleteEvents. In the following example, the ValueChange event is invoked inside the Created event handler, so it triggers once the component is created or rendered.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
    <AutoCompleteEvents @ref="dropObj" TValue="string" TItem="Countries" Created="onCreate" ValueChange="ChangeCountry"></AutoCompleteEvents>
</SfAutoComplete> 

@code {
    public class Countries 
    { 
        public string Name { get; set; } 

        public string Code { get; set; } 
    } 

    List<Countries> Country = 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" }, 
        new Countries() { Name = "France", Code = "FR" }, 
        new Countries() { Name = "Finland", Code = "FI" }, 
        new Countries() { Name = "Germany", Code = "DE" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    };
    public AutoCompleteEvents<string, Countries> dropObj { get; set; } 

    public void onCreate() 
    {
        var args = new Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries>() { Value = "Cameroon" };
        this.dropObj.ValueChange.InvokeAsync(args); 
    } 
    public void ChangeCountry(ChangeEventArgs<string, Countries> args)
    {
        Console.WriteLine("Value has been changed!!");
    }
}

Programmatically focus in and focus out the component

To trigger the FocusAsync() and FocusOutAsync() methods using the AutoComplete instance, use buttons and bind their click events to these methods. Clicking the corresponding button invokes the focus or blur behavior on the component.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<button @onclick="Focus">Focus</button>

<button @onclick="FocusOut">FocusOut</button>

<SfAutoComplete @ref="AutoObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    SfAutoComplete<string, Games> AutoObj;

    public string GameValue { get; set; } = "American Football";

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
    };

    public void Focus()
    {
        this.AutoObj.FocusAsync();
    }

    public void FocusOut()
    {
        this.AutoObj.FocusOutAsync();
    }

}

The following events are triggered on focus and blur.

Focus event

The Focus event is triggered when the component receives focus.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Focus="@FocusHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void FocusHandler(Object args)
    {
        // Here, you can customize your code.
    }
}

Blur event

The Blur event is triggered when focus moves out of the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Blur="@BlurHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void BlurHandler(Object args)
    {
        // Here, you can customize your code.
    }
}

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Selection in AutoComplete

Get selected value

Preselected value on OnInitializedAsync

Programmatically change the selected value

ValueChange event

OnValueSelect event

Preselect value with index

Autofill the selected value

Get selected item by value

Focus the next component on selection

Prevent reload on form submit

Programmatically clear the selected value

Programmatically trigger onChange event

Programmatically focus in and focus out the component

Focus event

Blur event