We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Remote dropdownlist to only load data once filter data is entered

Remote dropdownlist to only load data once filter data is entered

Hi,

Is there a way to have the dropdownlist only load remote data once you start typing within the filter box? We have a large amount of data & want it to rather load only once the user has typed 3 or more characters in the search box. This will reduce the number of items returned from the server.

I'm aware of the following properties:

enableServerFiltering (we need this to be true to reduce the number of items returned to the front end)
enableFilterSearch (this must be true as this will provide the filter textbox)

virtualScrollMode - this could work as a solution, but the above two options are still necessary. 


Any assistance in this regard would be appreciated 

Thank you


3 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 6, 2020 01:19 PM UTC

Hi Malcolm, 
 
Greetings from Syncfusion support.  
 
Based on your requirement , it seems you have large set of data for DropDownList and need to avoid loading of entire data initially. If so, you can set itemsCount based on the number of items to be loaded initially along with allowVirtualScrolling set to true. This will load few items (mentioned with itemsCount) initially and remaining items will be loaded during scroll.  To filter the items after entering 3 characters in input search box, you can check the search string length and prevent the search functionality through search event. Refer to the following code.  
 
$('#customerList').ejDropDownList({ 
            dataSource: customerList ,  
            fields : { text: "ContactName", value: 'ContactName'  },  
            itemsCount : 20 ,  
            popupHeight: "200px", 
            width: "250px", 
            enableFilterSearch: true, 
            enableServerFiltering: true, 
            allowVirtualScrolling: true, 
               search: function(args) { 
              if (args.searchString.length < 3 ) { //check search string length 
                args.cancel = true; 
              } 
            } 
 
Now the query will be passed to server only when 3 or more characters are entered.  
 
Refer to the following sample. 
 
 
Please let us know if you need further assistance on this.  
 
Regards, 
Shameer Ali Baig S.

MV Malcolm van Staden February 7, 2020 12:05 PM UTC

Hi,

Thank you, the provided solution resolves my query.

Is there a way to be able to add an additional filter (to be sent to the server) for filtering? So currently it makes use of the contains clause for the customer name, but what if we want to ensure that only customers from company XYZ and who's name contains the search query are returned? How would we go about adding the additional AND clause condition to the query?

MK Muthukrishnan Kandasamy Syncfusion Team February 10, 2020 09:58 AM UTC

Hi Malcom, 
 
Thanks for the update. 
 
Yes, you can customize the filtering in DropDownList control by using query property. We have prepared sample for your convenience, in this sample we have only returns the data from particular country. Refer the below code block. 
 
     
<div class="control"> 
        <div class="ctrllabel">Select a Customer Name</div> 
        <input type="text" id="customerList" /> 
    </div> 
    <script type="text/javascript"> 
             
        var customerList = ej.DataManager({ 
          crossDomain: true 
        }); 
            var query = ej.Query().select("ShipName", "ShipCountry").where("ShipCountry", "equal", "France", false); 
        $(function () { 
            $('#customerList').ejDropDownList({ 
            dataSource: customerList ,  
            query: query,  
            fields: { text: "ShipName", value: "ShipCountry" },  
            itemsCount : 20 ,  
            popupHeight: "200px", 
            width: "250px", 
            enableFilterSearch: true, 
            enableServerFiltering: true, 
            allowVirtualScrolling: true, 
            search: function(args) { 
              if (args.searchString.length < 3 ) { //check search string length 
                          args.cancel = true; 
              } 
            } 
        }); 
                                     
}); 
 
    </script>  
 
 
Refer the below link for the sample. 
 
Refer to the below documentation link to know more about the customization in query. 
 
Please let us know, if you need any assistance. 
 
Regards, 
Muthukrishnan K 


Loader.
Up arrow icon