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

AutoComplete - Custom DataSource binding

Are there some workaround or examples to use AutoComplete with custom datasource binding that is filled externally avoiding the usage of DataManager. (The same approach is available for the DataGrid here
Thanks for help.

5 Replies

PO Prince Oliver Syncfusion Team October 30, 2018 07:11 AM UTC

Hi Stas, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared sample based on your requirement for custom databinding to the AutoComplete without data manager. Kindly refer to the following code snippet. 
 
mounted(){ 
  let ajax = new Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET"); 
  ajax.send(); 
  ajax.onSuccess = function(data){   
    remoteData = JSON.parse(data); 
  }  
  }, 
 methods: {  
      onFiltering: function(e) { 
          var query = new Query();  
          query = (e.text !== '') ? query.where('OrderID', 'startswith', e.text, true) : query;  
          e.updateData(remoteData, query); 
      } 
  }, 
 
We have attached the sample for your reference, kindly refer to the following link:  https://codesandbox.io/s/qqwzl0j396  
 
Regards, 
Prince 




MA Marco October 30, 2018 04:01 PM UTC

I have also tried this example, but as it is, it seems to work only if you presume to load the data from the remote service only one time, when the component is created.
I need to call the service/ web api every time a new search is started and also a first time if an initial value is provided for the autocomplete (like it seems to be already done if you use the default datamanager as datasource). In addition to this problem, it seems that the filtering event is triggered on every keypress, even if i specify a minimum amount of characters, and it seems that other internals of the autocomplete/dropdown, such as the loading spinner or the hide popup are not correctly considered too.

Is it possible to override the way the datamanager performs the ajax call, using another ajax library / implementation, instead of fiddling with all the autocomplete / dropdown events and internals?

Thanks in advance


PO Prince Oliver Syncfusion Team October 31, 2018 05:34 PM UTC

Hi Stas, 
 
Thank you for your update. 
 
Query 1: I need to call the service/ web api every time a new search is started and also a first time if an initial value is provided for the autocomplete 
 
We have provided web API ajax request for initial rendering in mounted event and It will be called for each filtering and ajax request in filtering event. The Request will be made for every text typed in input element.  
 
Query 2: it seems that the filtering event is triggered on every keypress, even if i specify a minimum amount of characters 
 
In autocomplete component when we set “minLength” property, the filtering event will trigger only after the number of characters typed in the text in input element exceed the minimum length. This is because we have restricted the request made in updateData method. While in custom filtering, we need to manually check the “minLength” and input search text length before calling updateData method.  
 
Query 3: it seems that other internals of the autocomplete/dropdown, such as the loading spinner or the hide popup are not correctly considered too 
 
We have checked your requirement to show and hide the spinner in autocomplete. We have provided public method, to show the spinner in the element. Kindly refer to the following code. 
 
onFiltering: function(e) {  
    e.preventDefaultAction = true; 
    if(e.text.length>=this.$refs.autoObj.ej2Instances.minLength){ 
        this.$refs.autoObj.ej2Instances.showSpinner(); 
        let ajax = new Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders/?$select=CustomerID&$top=5&$filter=startswith(tolower(CustomerID),'"+e.text+"')", "GET"); 
        ajax.send(); 
        ajax.onSuccess = function(data){        
            e.updateData(JSON.parse(data).result); 
        } 
    } 
} 
 
 
Regards, 
Prince 



DJ Dan Johnson November 2, 2018 05:37 PM UTC

With this example, how do you show the error template when an error occurs?  If I do this:

ajax.onFailure = function () {
    e.updateData([]);
}

All I get is the no records found template, but I want my users to know there was a problem.  Been browsing source for an hour now and can't figure out how to trigger the error template.


PO Prince Oliver Syncfusion Team November 5, 2018 11:43 AM UTC

Hi Dan, 

Thank you for your update. 

By default, in autocomplete component, we have provide “Action Failure Template to show error template in the popup when the data fetch request from the remote server fails. Kindly refer to the following code snippet. 
 
var actionVue = Vue.component("actionFailureTemplate", { 
  template: `<span class="action-failure"> Data fetch got failed</span>`, 
  data() { 
    return { 
      data: {} 
    }; 
  } 
}); 
 
 
Kindly refer to the following UG documentation for more information:  

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon