Combo Box

new ac.dropdowns.ComboBox(
	{
		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"
	},
	"#cntlComboBox"
);

<input id="cntlComboBox" />

const cntlCascadingCountry = new ac.dropdowns.ComboBox(
	{
		dataStore: countries,
		fields: { text: "countryName", value: "countryId" },
		placeholder: "Country",
		popupHeight: "auto",
		change: () => {
			cntlCascadingCity.enabled = false;
			cntlCascadingCity.value = null;

			if (cntlCascadingCountry.value === null) {
				cntlCascadingState.enabled = false;
				cntlCascadingState.value = null;
			} else {
				let tempQuery = new ac.data.Query().where("countryId", "equal", cntlCascadingCountry.value);

				cntlCascadingState.enabled = true;
				cntlCascadingState.query = tempQuery;
				cntlCascadingState.value = null;
			}

			cntlCascadingState.dataBind();
			cntlCascadingCity.dataBind();
		}
	},
	"#cntlCascadingCountry"
);

const cntlCascadingState = new ac.dropdowns.ComboBox(
	{
		dataStore: states,
		fields: { text: "stateName", value: "stateId" },
		placeholder: "State",
		popupHeight: "auto",
		enabled: false,
		change: () => {
			if (cntlCascadingState.value === null) {
				cntlCascadingCity.enabled = false;
				cntlCascadingCity.value = null;
			} else {
				let tempQuery = new ac.data.Query().where("stateId", "equal", cntlCascadingState.value);

				cntlCascadingCity.enabled = true;
				cntlCascadingCity.query = tempQuery;
				cntlCascadingCity.value = null;
			}

			cntlCascadingCity.dataBind();
		}
	},
	"#cntlCascadingState"
);

const cntlCascadingCity = new ac.dropdowns.ComboBox(
	{
		dataStore: cities,
		fields: { text: "cityName", value: "cityId" },
		placeholder: "City",
		popupHeight: "auto",
		enabled: false
	},
	"#cntlCascadingCity"
);

<div class="d-flex align-items-center flex-wrap" style="gap: 10px; width: 60%">
	<input id="cntlCascadingCountry" />
	<input id="cntlCascadingState" />
	<input id="cntlCascadingCity" />
</div>

const countries = [
	{ countryName: "United Kingdom", countryId: "2" },
	{ countryName: "United States", countryId: "1" }
];

const states = [
	{ stateName: "Florida", countryId: "1", stateId: "100" },
	{ stateName: "North Carolina", countryId: "1", stateId: "101" },
	{ stateName: "New York", countryId: "1", stateId: "102" },
	{ stateName: "Texas", countryId: "1", stateId: "103" },
	{ stateName: "England", countryId: "2", stateId: "200" },
	{ stateName: "Northern Ireland", countryId: "2", stateId: "201" },
	{ stateName: "Scotland", countryId: "2", stateId: "202" },
	{ stateName: "Wales", countryId: "2", stateId: "203" }
];

const cities = [
	{ cityName: "Miami", stateId: "100", cityId: 1001 },
	{ cityName: "Orlando", stateId: "100", cityId: 1002 },
	{ cityName: "Tampa", stateId: "100", cityId: 1003 },
	{ cityName: "Asheville ", stateId: "101", cityId: 1004 },
	{ cityName: "Concord", stateId: "101", cityId: 1005 },
	{ cityName: "Raleigh", stateId: "101", cityId: 1006 },
	{ cityName: "Albany", stateId: "102", cityId: 1007 },
	{ cityName: "Buffalo", stateId: "102", cityId: 1008 },
	{ cityName: "Syracuse", stateId: "102", cityId: 1009 },
	{ cityName: "Austin", stateId: "103", cityId: 1010 },
	{ cityName: "Dallas", stateId: "103", cityId: 1011 },
	{ cityName: "Houston", stateId: "103", cityId: 1012 },
	{ cityName: "Birmingham", stateId: "200", cityId: 2001 },
	{ cityName: "London", stateId: "200", cityId: 2002 },
	{ cityName: "York", stateId: "200", cityId: 2003 },
	{ cityName: "Armagh", stateId: "201", cityId: 2004 },
	{ cityName: "Belfast", stateId: "201", cityId: 2005 },
	{ cityName: "Derry", stateId: "201", cityId: 2006 },
	{ cityName: "Aberdeen", stateId: "202", cityId: 2007 },
	{ cityName: "Edinburgh", stateId: "202", cityId: 2008 },
	{ cityName: "St Andrews", stateId: "202", cityId: 2009 },
	{ cityName: "Cardiff", stateId: "203", cityId: 2010 },
	{ cityName: "Monmouth", stateId: "203", cityId: 2011 },
	{ cityName: "Newport", stateId: "203", cityId: 2012 }
];

const cntlCustom = new ac.dropdowns.ComboBox(
	{
		dataStore: sports,
		fields: { text: "text", value: "id" },
		placeholder: "Type of sport",
		allowFiltering: true,
		popupHeight: "300px",
		noRecordsTemplate:
			'<div><div id="notfound">No matching items found, do you want to add it to the list?</div>' +
			'<button id="btn" class="a-cntl a-btn">Add Item</button></div>',
		filtering: (e) => {
			let query = new ac.data.Query();

			query = e.text !== "" ? query.where("text", "startswith", e.text, true) : query;
			e.updateData(data, query);

			if (document.getElementById("notfound")) {
				document.getElementById("btn").onclick = () => {
					let customValue = document.getElementById("cntlCustom").value;
					let newItem = { text: customValue, id: customValue };

					cntlCustom.dataSource.push(newItem);
					cntlCustom.hidePopup();
					cntlCustom.addItem(newItem);
					cntlCustom.value = customValue;
				};
			}
		}
	},
	"#cntlCustom"
);

<input id="cntlComboBox" />

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.ComboBox(
	{
		dataStore: fruitandvegs,
		fields: { groupBy: "season", value: "text" },
		placeholder: "Fruits and Vegetables"
	},
	"#cntlComboBox"
);

<input id="cntlComboBox" />

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" }
];

new ac.dropdowns.ComboBox(
	{
		dataStore: sports,
		fields: { text: "text", value: "id" },
		placeholder: "Type of sport",
		allowFiltering: true,
		filtering: (e) => {
			let query = new ac.data.Query();
			query = e.text !== "" ? query.where("text", "startswith", e.text, true) : query;
			e.updateData(data, query);
		}
	},
	"#cntlComboBox"
);

<input id="cntlComboBox" />

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 }
];