Reply To: Drop Down List With On Demand Ajax Calls

[Hristofor]

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();
    }
}