Delay before triggering search

[Rodrigo]

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

[Sevvandhi Nagulan]

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, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1039334990 

 

Regards, 

Sevvandhi N 

[Zdenek Plachy]

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

[UdhayaKumar Duraisamy]

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 Link: https://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 == null) throw 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