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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

delaySuggestionTimeout for Angular 1 control

Thread ID:

Created:

Updated:

Platform:

Replies:

127851 Dec 13,2016 06:08 PM UTC Dec 22,2016 09:26 AM UTC JavaScript 8
loading
Tags: ejAutoCompleteTextBox
Thomas French
Asked On December 13, 2016 06:08 PM UTC

Hi,

I have an Angular1 autoComplete control that is currently being used as shown below:

<input id="autoCompleteBox" type="text" ej-autocomplete e-width="100%" e-datasource="DeviceData"
    e-showpopupbutton="true" e-select="autoSelect" e-change="autoChange"
    e-fields-key="multicolumnkey" e-fields-text="multicolumntext" e-highlightserach="true"
    e-multicolumnsettings="multicolumncolset" e-focusIn="onFocus" e-search="test"
    e-delaySuggestionTimeout="2000"/>

I am trying to get the delaySuggestionTimeout to apply after 2 seconds, but it does not appear to be working.
Is there any way for the suggestion timeout to fire after the 2 seconds using the javascript functionality provided?

Thank you!

Thomas French
Replied On December 13, 2016 07:59 PM UTC

I believe that I had narrowed my problem down a bit further. The below html is the result of a search, and the dropdown to be open. What happens is I make an API call, and my data source changes by populating with data, and then element becomes aria-expanded="false" instead of ="true" like I want it to be.

<input id="autoCompleteBox" type="text" ej-autocomplete e-width="100%" e-datasource="DeviceData" e-showpopupbutton="true" e-select="autoSelect" e-change="autoCompleteOnChange" e-fields-key="multicolumnkey" e-fields-text="multicolumntext" e-highlightserach="true" e-multicolumnsettings="multicolumncolset" e-focusin="onFocus" e-delaysuggestiontimeout="500" class="ng-scope ng-pristine ng-valid e-autocomplete e-js e-input" data-compile="true" tabindex="0" role="combobox" aria-label="Autocomplete textbox" aria-expanded="true" aria-autocomplete="list" autocomplete="off" name="autoCompleteBox" aria-owns="autoCompleteBox_suggestion" aria-haspopup="true">

Arun Palaniyandi [Syncfusion]
Replied On December 14, 2016 12:03 PM UTC

Hi Thomas,  
   
Thanks for contacting Syncfusion support. 

We have tried to reproduce the mentioned issue using the shared code snippet but unfortunately we are unable to reproduce the same. The suggestion list is opened after 2 seconds delay without any issue when setting delaySuggestionTimeout as 2000. We found that you have used client side events like the focusIn, change, search in the given code and these events will trigger before the suggestion list opens. Hence we suspect that may cause the issue in delaying the suggestion list pop up. 

Sample link: 

If we have misunderstood your query, could you please share more details on the issue? We also request you to use our sample to reproduce the issue. 

Regards, 
Arun P 


Thomas French
Replied On December 14, 2016 02:54 PM UTC

Hi Arun,

Thank you for your quick reply, with a working example. Unfortunately, I am still having the same issue as before, but I will be as detailed as possible.

Purpose:
   When a user types into the autoCompleteBox they are expecting to see all possible matches to their text. What is currently happening on the backend is that onChange there is an API call which populates '$scope.DeviceData', which is the 'e-datasource' for the autoCompleteBox.

Problem:
   When searching for data, the $scope.DeviceData is being populated correctly, but the dropdown for the autoComplete flashes then disappears almost immediately. In other words, instead of waiting the 'e-delaySuggestionTimeout' time, the dropdown appears, then disappears, not showing any of the data that was just retrieved. I believe that this has something to do with the API call being asynchronous and the dropdown box is closing when receiving new data in the $scope.DeviceData. As of right now, the dropdown for the autoComplete flashes, then disappears. If I reopen the dropdown by clicking the search icon, or using my onFocus event, then the dropdown stays open and data shown is correct.

---HTML---

<input id="autoCompleteBox" type="text" ej-autocomplete e-width="100%" e-datasource="DeviceData"
    e-showpopupbutton="true" e-select="autoCompleteOnSelect" e-change="autoCompleteOnChange"
    e-fields-key="multicolumnkey" e-fields-text="multicolumntext" e-highlightserach="true"
    e-multicolumnsettings="multicolumncolset" e-focusIn="onFocus"
    e-delaySuggestionTimeout="2000" e-placeholder="Search"
    e-minCharacter="3"/>

---JavaScript---
$scope.autoCompleteOnSelect = function (args) {
 if (args.item !== undefined) {
  addSelectedDevice(args.item);
  $("#autoCompleteBox").ejAutocomplete("clearText");
 }
}
$scope.autoCompleteOnChange = function (args) {
 if (args.value.length >= 3) {
  querySearch(args.value);
 }
}
$scope.onFocus = function (args) {
 $("#autoCompleteBox").ejAutocomplete("open");
}

//Call works as expected and returns correct results
function querySearch (queryString) {
   $http({
       method: 'GET',
       url: MY_URL_TO_API,
       headers: {
           'apiKey': 'XXXX'
    }
   }).then(function successCallback(response) { 
    $scope.DeviceData = response.data.value;  //Set $scope.DeviceData to what data comes back
   },
   function errorCallback(response) {
    alert("There was an error in HTTP GET")
   });
}

var addSelectedDevice = function (device) {
//Add device to separate list (works as expected)
}





Arun Palaniyandi [Syncfusion]
Replied On December 15, 2016 12:19 PM UTC

Hi Thomas,   
 
Thanks for the update. 
 
We have modified sample with your shared code and the issue is still not reproduced. We can able to get the suggestion popup delayed in 2 seconds. The Client side events like the focusIn, change, search code given doesn’t affect the suggestion delay. Hence we request you to provide us the below details to provide an appropriate solution 

·         Syncfusion product version details. 
·         Screenshots of script errors in console window (if any).  
·         Issue reproducible sample. 

We also would like to know whether the popup delays 2 seconds when focus in the autocomplete at initial focus, on getting the data from AJAX? 

Please find the modified sample for further reference: 
 
Note: We have used the latest version (14.4.0.15) scripts in our sample. 

Regards, 
Arun P 


Thomas French
Replied On December 15, 2016 04:31 PM UTC

Hi Arun,
Here are the answers to the questions you asked:

Questions:
  1.    Syncfusion product version details.
  2.    Screenshots of script errors in console window (if any).  
  3.    Issue reproducible sample. 

Answers:
  1. I am using version 14.4.0.15, the same version as the example that you sent me
  2. There are no errors from database, API, or UI
  3. See attached code

I had to edit the code that you provided ever so slightly in order to get it to run.

Changes:
  1. e-delaySuggestionTimeout="800" from e-delaySuggestionTimeout="2000" //To see a more "real-time" search
  2. $scope.multicolumndataList = response.data from $scope.multicolumndataList = response.data.value //Line 106 in default.html due to '.value' being undefined but .data was not



Attachment: Syncfusion_Autocomplete_Support_cdfd0f86.zip

Arun Palaniyandi [Syncfusion]
Replied On December 16, 2016 12:12 PM UTC

Hi Thomas,    
  
Thanks for the update. 
 
We were able to reproduce the reported issue with Autocomplete pop up that show and hide on AJAX. This issue occurs because in Autocomplete change event, you have set the response.data to the scope variable '$scope.DeviceData' which is bound to its dataSource on AJAX success. So on updating the scope variable will call the set model and resets the data bound to Autocomplete, which will cause the popup list to be hidden whenever the AJAX calls. Hence we request you to update the model value of datasource on AJAX success. 

Code: 

$scope.querySearch=function(queryString) { 
  var request = $http({ 
       method: 'GET', 
       headers: { 
           'Content-Type': 'application/json' 
       } 
       
   }).then(function successCallback(response) {                                
       var obj = $("#autoCompleteBox").ejAutocomplete("instance"); 
       obj.model.datasource = response.data; 
   },  
   function errorCallback(response) { 
    alert("There was an error in HTTP GET") 
   }); 
} 
}); 


Meanwhile we would like to know whether you are using the same datasource for the AJAX call and initial render? If so on AJAX call also the same filtered data will be available in the pop up. Hence the autocomplete without the AJAX call, will filter the suggestion list based on the search value. 
 
Please shares us the requested details to provide an appropriate solution. 
 
 
 
Regards, 
Arun P 


Thomas French
Replied On December 21, 2016 05:56 PM UTC

Hey Arun,

Thank you for your latest solution, that is what solved the problem for me.

To answer your question about data for initial render and data after change:
My ultimate goal is to query my database and have a different result set based on the user input. So, the initial dataset is empty, and will change based on user input.
I did not want to pull down and pre-populate the autoComplete text box with 100,000+ items. Instead I pull back 50 results at a time based on the input from the user via the onChange event, and sort the returning data accordingly.

Thank you for your help!

Arun Palaniyandi [Syncfusion]
Replied On December 22, 2016 09:26 AM UTC

Hi Thomas,      
  
Thanks for the update.   
  
We are glad that your issue have been solved.  
  
Please let us know, if you face any queries in future.   
  
Regards,  
Arun P  


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.

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

;