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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

AutoComplete - Custom DataSource binding

Thread ID:

Created:

Updated:

Platform:

Replies:

140614 Oct 29,2018 10:05 AM UTC Nov 5,2018 11:43 AM UTC Vue 5
loading
Tags: AutoComplete
Stas Volyansky
Asked On October 29, 2018 10:05 AM UTC

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.

Prince Oliver [Syncfusion]
Replied On 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 



Marco
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


Dan Johnson
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;