How to search multiple columns in Blazor Autocomplete

[Syncfusion Support]

Answer:

We have provided MultiColumn in AutoComplete component by using “template” support. In your application set the cssClass (cssClass="e-multi-column") property and if we want to add the border in column, take the multicolumn td element set border.

<SfAutoComplete TValue="string" TItem="Countries" Placeholder="e.g. Australia" CssClass="e-multi-column" DataSource="@Country">

<AutoCompleteFieldSettings Value="Name">AutoCompleteFieldSettings>

<DropDownListTemplates TItem="Countries">

<HeaderTemplate>

<table><tr><th class="e-text-center">Nameth><th width="240px">Positionth>tr>table>

HeaderTemplate>

<ItemTemplate>

<table><tbody><tr><td class="e-text-center">@((context as Countries).Name)td><td width="240px">@((context as Countries).Job)td>tr> tbody>table>

ItemTemplate>

DropDownListTemplates>

SfAutoComplete>

<style>

.e-multi-column.e-ddl.e-popup.e-popup-open td {

border: 1px solid rgba(0, 0, 0, 0.125);

}

style>

Find the sample to search multiple columns in Blazor Autocomplete from here.

[Thomas Keller]

How can I search multiple columns?

In this example I can search for "Australia" and I see "Australia" as 'Name' and "Team Lead" as 'Position'. But I can not search for "Team Lead".

When I search multiple columns, I expect this entry to show up, no matter if I search for "Australia" or "Team".

How can this be done?

Thank you

[Sevvandhi Nagulan]

Hi Thomas, 

 

Greetings from Syncfusion support. 

We checked the reported requirement. If you want to filter the items based on multiple fields, we suggest using the ‘Predicate’ of dataManager in the filtering event. Refer to the code below 

   public async Task OnFiltering(FilteringEventArgs args) 

    { 

        args.PreventDefaultAction = true; 

        var pre = new WhereFilter(); 

        var predicate = new List<WhereFilter>(); 

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 

        predicate.Add(new WhereFilter() { Condition = "or", Field = "Code", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 

        pre = WhereFilter.Or(predicate); 

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

        await this.autoObj.Filter(Country, query); 

    } 

 

 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_predicate-1563051024 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Thomas Keller]

Hi Sevvandhi,

thanks for the quick answer. Just what I was looking for, works like a charm.

Regards,

Thomas

[Sevvandhi Nagulan]

Hi Thomas, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N