How to Show Popup on Input Focus in Blazor AutoComplete?

This article provides a guide on how to display a popup when the input field of the Syncfusion Blazor AutoComplete component gains focus.

Show popup on focus

To make the AutoComplete component display a popup when the input field gains focus, you can use the Focus event. Below is a sample code snippet illustrating how to implement this behavior:

<SfAutoComplete @ref="AutoCompleteObj" TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name" />
    <AutoCompleteEvents TItem="Country" TValue="string" Focus="@FocusHandler"></AutoCompleteEvents>
</SfAutoComplete>

@code {
    SfAutoComplete<string, Country> AutoCompleteObj;

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = new List<Country> {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" }
    };

    private async void FocusHandler(Object args)
    {
        await AutoCompleteObj.ShowPopupAsync();
    }
}

In this example, when the input field gains focus, the Focus event is triggered, and the ShowPopupAsync method is called to display the popup.

Documentation

For more detailed information on the events available in the SfAutocomplete component, refer to the official Syncfusion documentation:

• Autocomplete Events Documentation

API Reference

• ShowPopupAsync

Conclusion
We hope you enjoyed learning how to show popup on input focus in Blazor AutoComplete.
You can refer to our Blazor AutoComplete feature tour page to know about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor File Upload example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor AutoComplete and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!