1. Home
  2. Forum
  3. jQuery
  4. Drop Down List dynamics source from AJAX

Drop Down List dynamics source from AJAX

Dear Syncfusion support,
Here is my problem: at first, using dropdownlist for a while, I have no problem, it is a good library :). But the data source grows very large, > 50.000 items. So we need to refactor it. The drop down must be populated from ajax call. This is what we have done:

            search: function (argument) {
                $.ajax({
                    type: 'POST',
                    url: '@name',
                    data: {
                        search: argument.searchString
                    },
                    success: function (response) {
                        $("#@propertyname").data("ejDropDownList").option("dataSource", response);
                    }
                });
            }

Above call is ok in functionality, but the user experience is somewhat lacking:
1. After user type something, there is no indication that the user need to wait a while in order to view the options. How I can implement some waiting animation inside the drop down?
2. After the ajax call return successfully, the drop down closed itself, after the user re-click the dropdown, the user can see the newest option. How I can implement so after the ajax call return successfully, the drop down does not close itself, the options updated to the returned ajax?
3. Every character typed, always call the search function, so every character typed always call ajax. Is there a functionality in order, to wait some time before ajax call that is built in by syncfusion? If there is not any, it is okay, I can implement it with some JS script timeout :).

Thank you very much for the help!

1 Reply
KR Keerthana Rajendran Syncfusion Team November 13, 2017 10:46 AM UTC

Hi Oka Sugandi,   
   
Thank you for contacting Syncfusion support.   
   
Query 1: After user type something, there is no indication that the user need to wait a while in order to view the options. How I can implement some waiting animation inside the drop down?   
   
Response: You can render dropdownlist popup as ejWaitingPopup and  show this loading indicator during search event using show method and hide this indicator after AJAX success using hide  as shown below    
   
  $(function () {   
        // declaration   
        country = [   
             { id: "bk1", text: "Algeria" }, { id: "bk2", text: "Armenia" }, { id: "bk3", text: "Bangladesh" },   
             { id: "bk4", text: "Cuba" }, { id: "bk5", text: "Denmark" }, { id: "bk6", text: "Egypt" },   
             { id: "bk7", text: "Finland" }, { id: "bk8", text: "India" }, { id: "bk9", text: "Malaysia" },   
             { id: "bk10", text: "Norway" }, { id: "bk11", text: "Singapore" }, { id: "bk12", text: "Romania" }   
        ];   
        $('#dropdown').ejDropDownList({   
            dataSource: country,   
            enableFilterSearch: true,   
            watermarkText: "Select a bike",   
            fields: { id: "id", text: "text", value: "text" },   
            search:"onfiltersearch"   
   
        });   
        $("#dropdown_popup").ejWaitingPopup({ showOnInit: false });   
    });   
   
    function onfiltersearch(argument)   
    {   
        var wpobj = $("#dropdown_popup").data("ejWaitingPopup");   
        var ddlobj = $('#dropdown').data("ejDropDownList");   
        wpobj.show();   
        $.ajax({   
            type: 'POST',   
            url: '@Url.Action("DataSource", "Dropdownlist")',   
            data: {   
                search: argument.searchString,       
            },   
            success: function (response) {      
                wpobj.hide();   
                $("#dropdown").data("ejDropDownList").option("dataSource", response);   
                ddlobj.showPopup();   
            },   
               
        });   
    }   
   
Also, refer the below given link to know more details about properties and methods of waiting popup    
   
   
Query 2: After the ajax call return successfully, the drop down closed itself, after the user re-click the dropdown, the user can see the newest option. How I can implement so after the ajax call return successfully, the drop down does not close itself, the options updated to the returned ajax?   
   
Response: We suggest you to use showPopup() method of  DropDownList in success event of AJAX to show popup with updated options. Please refer to the below given code   
   
   
    function onfiltersearch(argument)   
    {   
        var wpobj = $("#dropdown_popup").data("ejWaitingPopup");   
        var ddlobj = $('#dropdown').data("ejDropDownList");   
        wpobj.show();   
        $.ajax({   
            type: 'POST',   
            url: '@Url.Action("DataSource", "Dropdownlist")',   
            data: {   
                search: argument.searchString,       
            },   
            success: function (response) {      
                wpobj.hide();   
                $("#dropdown").data("ejDropDownList").option("dataSource", response);   
                ddlobj.showPopup();   
            },   
               
        });   
    }   
   
We have attached a sample for reference which can be downloaded from the below link:   
   
   
Query 3: Every character typed, always call the search function, so every character typed always call ajax. Is there a functionality in order, to wait some time before ajax call that is built in by syncfusion? If there is not any, it is okay, I can implement it with some JS script timeout :).   
   
Response: Sorry, we don’t have any inbuilt functionality to set delay before AJAX and search event will be triggered for every letter typed in filter search box. You can implement this delay with some JS script timeout based on your convenience.   
   
Regards,   
Keerthana.   


Loader.
Up arrow icon