Autofill supported with ComboBox
19 Jun 20242 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