Autocomplete filter and popup on demand

[Mercedes Mourras]

Hi,

I'm testing autocomplete.

I don't want to populate it with all the table's records 

Because i'm populating list in OnFilter event handler, i want to avoid perform database query for each key input. Instead, i want le the user to type a text, and when Enter key is pressed (or a dropdown button shoud be ok), perform filter and popup.

How can i do it?

I have this OnFilter event handler and works ok but slow if i execute it for each keystroke:

    public void onIdClienteFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var predicate = new List<WhereFilter>();

        predicate.Add(new WhereFilter()

            {

                Condition = "or",

                Field = "Id_Cliente",

                value = args.Text,

                Operator = "Contains",

                IgnoreAccent = true,

                IgnoreCase = true

            });

        predicate.Add(new WhereFilter()

            {

                Condition = "or",

                Field = "Denominacion",

                value = args.Text,

                Operator = "Contains",

                IgnoreAccent = true,

                IgnoreCase = true

            });

        var wf = WhereFilter.Or(predicate);

        var query = new Query().Where(wf);

        //Search text in Database

        clientes = ClienteService.GetClientesSync(args.Text);

        this.AutoCompleteObj.FilterAsync(clientes, query);

    }

Thank you!

[Yohapuja Selvakumaran]

Hi Mercedes Mourra,

We've taken your filtering requirement into consideration and created a sample that meets your specifications. In this updated sample, filtering will now be triggered once the enter key is pressed.

To assist you further, We’ve attached the sample for your reference. Please take a look and let us know if it aligns with your expectations or if there's anything else we can do to enhance your experience.

Code Snippet:

<SfAutoComplete @ref="autoObj" AllowFiltering="true" TValue="string" TItem="Country" @bind-Value="AutoVal" Placeholder="e.g. Australia" DataSource="@Countries" @onkeydown="OnKeyDown">

    <AutoCompleteFieldSettings Text="Name"></AutoCompleteFieldSettings>

    <AutoCompleteEvents TValue="string" TItem="Country" Filtering="OnFiltering"></AutoCompleteEvents>

</SfAutoComplete>

 

@code {

    SfAutoComplete<string, Country> autoObj;

    public string AutoVal;

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Code = "0001" },

        new Country() { Name = "Bermuda", Code = "0002" },

        new Country() { Name = "Canada", Code = "0003" },

        new Country() { Name = "Cameroon", Code = "0004" },

    };

 

    public async Task OnKeyDown(KeyboardEventArgs e)

    {

        if (e.Key == "Enter")

        {

            var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "Contains", value = AutoVal, IgnoreCase = true });

            query = !string.IsNullOrEmpty(AutoVal) ? query : new Query();

            autoObj.ShowPopupAsync();

        }

    }

    public async Task OnFiltering(FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

    }

 

}

 

Regards,

Yohapuja S

Attachment: AutoComplete_filter_Enter_114546c4.zip