Delay before triggering search and triggering search with hotkey

Hello,

Is there any option to introduce a delay on the trigger to perform the search? I would like to have a delay and trigger only after a break. 
If a certain amount of time has elapsed after the input, only then should the request be made. This would avoid unnecessary requests for each letter.
Ideally, you can trigger the search without delay with a key combination, for example CTRL + space bar.

I use the AutoComplete with a custom URLAdaptor to communicate with my backend.
A basic sample of my project is here:  
https://stackblitz.com/edit/4zixfj-ysvyhp?file=index.ts

I know that I can create a delay with the minLength property, but this is not what I am looking for.

Regards,
Tolga

4 Replies 1 reply marked as answer

AK Akcherry August 13, 2020 03:45 PM UTC

I've found a solution, but this would have to be implemented as a new feature. It would work by delaying the keyUp-handler. That would be the onFilterUp-handler in this case. 

Based on this: https://stackoverflow.com/a/1909508/


SP Sureshkumar P Syncfusion Team August 14, 2020 10:42 AM UTC

Hi Akcherry, 
 
Greetings from Syncfusion support. 
 
We can achieve the requested requirement in the filtering event with help of debounce concept. This will delay the server request with the specified time interval so that it will filter the data after entering a certain character and reduce the time lag. Please find the code snippet below,  
 
<script>  
    function onFiltering(e) {  
        e.preventDefaultAction = true;  
        onFilter(e);  
    }  
    var onFilter = debounce(function (e) {  
        var data = new ej.data.DataManager({ url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers/', adaptor: new ej.data.ODataAdaptor(), crossDomain: true });  
        var query = new ej.data.Query();  
        // frame the query based on search string with filter type.  
        query = (e.text !== '') ? query.where('CompanyName''startswith', e.text, true) : query;  
        e.updateData(data, query);  
    }, 3000);  
  
    function debounce(func, wait, immediate) {  
        var timeout;  
        return function () {  
            var context = this, args = arguments;  
            var later = function () {  
                timeout = null;  
                if (!immediate) func.apply(context, args);  
            };  
            var callNow = immediate && !timeout;  
            clearTimeout(timeout);  
            timeout = setTimeout(later, wait);  
            if (callNow) func.apply(context, args);  
        };  
    };  
</script>  
 
Regards, 
Sureshkumar P. 
  



Marked as answer

AK Akcherry August 21, 2020 02:56 PM UTC

Hi Sureshkumar,

thanks for your answer. That solves part of my problem. But how do I get the information at onFilter that a certain key combination was pressed. I would like to set 'immediate' to true using CTRL + space.

Regards,
Akcherry


SP Sureshkumar P Syncfusion Team August 25, 2020 05:08 PM UTC

Hi Akcherry, 
 
We would like to inform you that if you are pressing the ctrl+Space key then the filtering event is not triggered in the AutoComplete component and its used for opening the popup of the component. So, we could not overcome this key configs. 
 
Regards, 
Sureshkumar P. 


Loader.
Up arrow icon