High-Performance UI Component Library for Enterprise Applications › Forums › General Discussions › DropDownList › Drop Down List With On Demand Ajax Calls › Reply To: Drop Down List With On Demand Ajax Calls
December 6, 2019 at 1:28 pm
#100532
Member
Hi ctstrist,
you can set the dataSource property in your Ajax success function in order to load the new data to the element. The dataSource property can be set at any time with new data.
Also dataSource property accepts a callback function which allows to load custom data according to the filter input. This means that by entering a new value inside the filter field anew dataSource according to it will be loaded. Fitlering can be enabled by setting the filterable property. Here’s an example:
window.onload = function () {
//Sample data
const data = [
{ "name": "Afghanistan", "code": "AF" },
{ "name": "land Islands", "code": "AX" },
{ "name": "Antarctica", "code": "AQ" },
{ "name": "Antigua and Barbuda", "code": "AG" },
{ "name": "Argentina", "code": "AR" },
{ "name": "Armenia", "code": "AM" }
];
const dropDownList = document.querySelector('smart-drop-down-list');
//Setting properties to the element
dropDownList.filterable = true;
dropDownList.displayMember = 'name';
dropDownList.valueMember = 'code';
dropDownList.dataSource = function (query, callback) {
let result = [];
// Creating a new dataSource according to the new input
for (let d = 0; d < data.length; d++) {
if (data[d].name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
result.push(data[d]);
}
}
//The Ajax request goes here
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Call the callback function here with the new result
callback(result);
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
}
}