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

Delay before triggering search

Hello,

I have a couple of questions regarding the autocomplete.
  1. Is there any option to introduce a delay on the trigger to perform the search? Currently if I search for "cos" the adapter is triggering 3 times. But since I wrote "cos" quickly I would like to have a delay and only fire after a pause, for example of 300ms
  2. Is there a way to specify that a autocomplete only accepts numbers?
Edit:
      3. when we press enter on an autocomplete / textbox  component, its currently executing the submit of the form. How can I prevent this behavior from happening
       - (Resolved )4. Validation errors appear immediately when entering the form. Is there anything that can be done to prevent this?

Edit 2: 
5. How can I add html 5 tags on syncfusion components. For example on the autocomplete compoment I would like to disable the browser suggestions like autocomplete=off"


Regards,
Rodrigo

3 Replies

SN Sevvandhi Nagulan Syncfusion Team February 6, 2020 03:54 PM UTC

Hi Rodrigo, 

Greetings from Syncfusion support. 

Query 1: Is there any option to introduce a delay on the trigger to perform the search? Currently if I search for "cos" the adapter is triggering 3 times. But since I wrote "cos" quickly I would like to have a delay and only fire after a pause, for example of 300ms 

You can use the MinLength property for delaying the server request. The search action will perform after typed minimum characters. 

<EjsAutoComplete TValue="string" @bind-Value="model.TestProperty" Placeholder="Select a customer" Query="@Query" MinLength="2"> 
            <EjsDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain=true></EjsDataManager> 
            <AutoCompleteFieldSettings Value="ContactName"></AutoCompleteFieldSettings> 
        </EjsAutoComplete> 

Query 2: when we press enter on an autocomplete / textbox  component, its currently executing the submit of the form. How can I prevent this behavior from happening 
 
The form will be submitted only when the click the submit button. Kindly refer the below code example, 
 
 
<EditForm EditContext="@editContext"> 
    <DataAnnotationsValidator /> 
    <div class="form-group"> 
        <EjsAutoComplete TValue="string" @bind-Value="model.TestProperty" Placeholder="Select a customer" Query="@Query" MinLength="2"> 
            <EjsDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/" Adaptor="Adaptors.ODataV4Adaptor" CrossDomain=true></EjsDataManager> 
            <AutoCompleteFieldSettings Value="ContactName"></AutoCompleteFieldSettings> 
        </EjsAutoComplete> 
        <ValidationMessage For="()=>model.TestProperty" /> 
    </div> 
    <EjsButton IsPrimary="true" HtmlAttributes="@(new Dictionary<string,object>{ { "type", "submit"} })">Save</EjsButton> 
</EditForm> 
 
 
Query 3: How can I add html 5 tags on syncfusion components. For example on the autocomplete compoment I would like to disable the browser suggestions like autocomplete=off" 

By default browser suggestion disabled in the autocomplete component. Kindly refer the below code, 

 

Please find the sample below, 

 
Regards, 
Sevvandhi N 



ZP Zdenek Plachy May 2, 2022 01:23 PM UTC

I really would welcome debounce or delay option for SfAutoComplete. All similar components have this option (Telerik or  HxAutosuggest | HAVIT Blazor - Free Bootstrap 5 components). Some web APIs have paid access based on number of calls which are depleted by unnecessary calls from SfAutoComplete.

Is there some way to achieve this behavior with current SfAutoComplete version? Based on its events maybe?

Thank you for your support!

Zdenek



UD UdhayaKumar Duraisamy Syncfusion Team May 3, 2022 01:17 PM UTC

Hi Rodrigo,


you can refer to the debounce concept as mentioned below in Autocomplete filtering event. Please refer to the sample for more details.


Sample Linkhttps://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServer-2011657524
 

  

    <SfAutoComplete @ref="@autoComplete" 

                            TValue="Countries" TItem="Countries" 

                            PopupWidth="@PopupWidth" 

                            PopupHeight="@PopupHeight" 

                            FloatLabelType='@FloatLabelType.Never' 

                            AllowFiltering="true" 

                            ShowPopupButton="true" 

                            ShowClearButton="true" 

                            CssClass="e-small" 

                            @bind-Value="Value" 

                            AllowCustom="@AllowCustom"> 

                <SfDataManager @ref="datamanager" AdaptorInstance="@typeof(CountryCustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 

 

                @if (MultiColumn) 

                { 

                    <AutoCompleteTemplates TItem="Countries"> 

                        <HeaderTemplate> 

                            <table> 

                                <tr> 

                                    @foreach (ColumnDetails field in DataContext.Columns) 

                                    { 

                                        <th><div class="e-text" style="@($"width:{field.Width}px;")">@field.Text</div></th> 

                                    } 

                                </tr> 

                            </table> 

                        </HeaderTemplate> 

                        <ItemTemplate> 

                            <table> 

                                <tbody> 

                                    <tr> 

                                        @foreach (ColumnDetails field in DataContext.Columns) 

                                        { 

                                            <td> 

                                                <div class="e-text-left" style="@($"width:{field.Width}px;")" title="@field.Name"> 

                                                    @if (field.Name == "FirstName") 

                                                    { 

                                                        @context.CountryName 

                                                    } 

                                                    else if (field.Name == "ID") 

                                                    { 

                                                        @context.CountryId 

                                                    } 

                                                    else if (field.Name == "LastName") 

                                                    { 

                                                        @context.CountryName} 

                                                </div> 

                                            </td> 

                                        } 

                                    </tr> 

                                </tbody> 

                            </table> 

                        </ItemTemplate> 

                    </AutoCompleteTemplates>} 

                <AutoCompleteFieldSettings Text="CountryName"></AutoCompleteFieldSettings> 

                <AutoCompleteEvents TValue="Countries" TItem="Countries" Blur="FocusOut" Filtering="onInputDebounced"></AutoCompleteEvents> 

            </SfAutoComplete> 

   

SfDataManager datamanager; 

    public async Task onFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args) 

    { 

        args.PreventDefaultAction = true; 

        var query = new Query(); 

 

        if (args.Text != "") 

        { 

            query = new Query().Where(new WhereFilter() 

            { 

                Field = "CountryName", 

                value = args.Text, 

                Operator = "Contains", 

                IgnoreCase = true 

            }); 

        } 

        var data = await this.datamanager.ExecuteQuery<Countries>(query); 

        var resultData = new List<Countries>(); 

        var dataResult = (data == null) ? new List<object>() : data; 

        resultData = (dataResult as IEnumerable)?.Cast<Countries>()?.ToList(); 

        await this.autoComplete.Filter(resultData, query); 

    } 

    Action<Syncfusion.Blazor.DropDowns.FilteringEventArgs> onInputDebounced; 

    protected override async Task OnInitializedAsync() 

    { 

        onInputDebounced = DebounceEvent<Syncfusion.Blazor.DropDowns.FilteringEventArgs>(async e => await this.onFiltering(e), TimeSpan.FromMilliseconds(1000)); 

        await base.OnInitializedAsync(); 

    } 

    Action<T> DebounceEvent<T>(Action<T> action, TimeSpan interval) 

    { 

        return Debounce<T>(arg => 

        { 

            InvokeAsync(() => 

            { 

                action(arg); 

                StateHasChanged(); 

            }); 

        }, interval); 

    } 

    Action<T> Debounce<T>(Action<T> action, TimeSpan interval) 

    { 

        if (action == nullthrow new ArgumentNullException(nameof(action)); 

 

        var last = 0; 

        return arg => 

        { 

            var current = System.Threading.Interlocked.Increment(ref last); 

            Task.Delay(interval).ContinueWith(task => 

            { 

                if (current == last) 

                { 

                    action(arg); 

                } 

            }); 

        }; 

    } 



Regards,

Udhaya Kumar D



Loader.
Live Chat Icon For mobile
Up arrow icon