JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › 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();
}
}