How to enable autofill in ASP.NET CORE ComboBox

17 Aug 20262 minutes to read

The ComboBox supports the autofill behaviour with the help of autofill property. Whenever you change the input value, the ComboBox will autocomplete your data by matching the typed character. Suppose, if there are no matches found then, comboBox doesn’t suggest any item.

@{
    ViewData["Title"] = "Home page";
    List<Countries> country = new List<Countries>();
    country.Add(new Countries { Name = "Australia", Code = "AU" });
    country.Add(new Countries { Name = "Bermuda", Code = "BM" });
    country.Add(new Countries { Name = "Canada", Code = "CA" });
    country.Add(new Countries { Name = "Cameroon", Code = "CM" });
    country.Add(new Countries { Name = "Denmark", Code = "DK" });
    country.Add(new Countries { Name = "France", Code = "FR" });
    country.Add(new Countries { Name = "Finland", Code = "FI" });
    country.Add(new Countries { Name = "Germany", Code = "DE" });
    country.Add(new Countries { Name = "Greenland", Code = "GL" });
    country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
    country.Add(new Countries { Name = "India", Code = "IN" });
    country.Add(new Countries { Name = "Italy", Code = "IT" });
    country.Add(new Countries { Name = "Japan", Code = "JP" });
    country.Add(new Countries { Name = "Mexico", Code = "MX" });
    country.Add(new Countries { Name = "Norway", Code = "NO" });
    country.Add(new Countries { Name = "Poland", Code = "PL" });
    country.Add(new Countries { Name = "Switzerland", Code = "CH" });
    country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
    country.Add(new Countries { Name = "United States", Code = "US" });
}

<div class="control-wrapper">
    <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
        <ejs-combobox id="country" datasource="@country" placeholder="e.g. India" autofill="true" popupheight="220px">
            <e-combobox-fields value="Name"></e-combobox-fields>
        </ejs-combobox>
    </div>
</div>
public class Countries
{
    public string Name { get; set; }
    public string Code { get; set; }
}

NOTE

View Sample in GitHub.