Auto Complete
The Auto Complete component displays a list of matched suggestions as the user types characters in the input field, allowing them to select one.
Default Behavior
Demonstrates the default behavior of the Auto Complete control.
The Auto Complete component displays a list of matched suggestions as the user types characters in the input field, allowing them to select one.
new ac.dropdowns.AutoComplete(
{
dataStore: sports,
placeholder: "Type of sport"
},
"#cntlAutoComplete"
);<input id="cntlAutoComplete" />const sports = [
{ text: "Baseball", id: 1 },
{ text: "Basketball", id: 2 },
{ text: "Football", id: 3 },
{ text: "Golf", id: 4 },
{ text: "Hockey", id: 5 },
{ text: "Pickleball", id: 6 },
{ text: "Rugby", id: 7 },
{ text: "Soccer", id: 8 },
{ text: "Swimming", id: 9 },
{ text: "Tennis", id: 10 }
];new ac.dropdowns.AutoComplete(
{
dataStore: new ac.data.DataStore({
url: "https://localhost/odata/sports",
adaptor: new ac.data.ODataV4Adaptor(),
crossDomain: false
}),
suggestionCount: 5,
query: new ac.data.Query().select(["Id", "Name"]).take(10),
fields: { value: "Name" },
placeholder: "Type of sport",
filterType: "StartsWith"
},
"#cntlAutoComplete"
);<input id="cntlAutoComplete" />new ac.dropdowns.AutoComplete(
{
dataStore: sports,
placeholder: "Type of sport",
highlight: true
},
"#cntlAutoComplete"
);<input id="cntlAutoComplete" />const sports = [
{ text: "Baseball", id: 1 },
{ text: "Basketball", id: 2 },
{ text: "Football", id: 3 },
{ text: "Golf", id: 4 },
{ text: "Hockey", id: 5 },
{ text: "Pickleball", id: 6 },
{ text: "Rugby", id: 7 },
{ text: "Soccer", id: 8 },
{ text: "Swimming", id: 9 },
{ text: "Tennis", id: 10 }
];new ac.dropdowns.AutoComplete(
{
dataStore: fruitandvegs,
fields: { groupBy: "season", value: "text" },
placeholder: "Fruits and Vegetables",
showPopupButton: true
},
"#cntlGrouping"
);<input id="cntlAutoComplete" style="max-height: 350px" />const fruitandvegs = [
{ text: "Apricots", season: "Spring", id: 1 },
{ text: "Asparagus", season: "Spring", id: 2 },
{ text: "Cherries", season: "Spring", id: 3 },
{ text: "Artichokes", season: "Spring", id: 4 },
{ text: "Tomatoes", season: "Summer", id: 5 },
{ text: "Blackberries", season: "Summer", id: 6 },
{ text: "Strawberries", season: "Summer", id: 7 },
{ text: "Summer Squash", season: "Summer", id: 8 },
{ text: "Apples", season: "Autumn", id: 9 },
{ text: "Beets", season: "Autumn", id: 10 },
{ text: "Acorn Squash", season: "Autumn", id: "item11" },
{ text: "Cabbage", season: "Autumn", id: "item12" },
{ text: "Brussels Sprouts", season: "Winter", id: "item13" },
{ text: "Grapefruits", season: "Winter", id: "item14" },
{ text: "Cauliflower", season: "Winter", id: "item15" },
{ text: "Sweet Potatoes", season: "Winter", id: "item16" }
];