I want to filtering by Text in AutoComplete.

[Seil]

Hi!

1.

I want to select a specific code in AutoComplete via DataSource consisting of Code and Name(Text).

After setting Name as Text and Code as Value, but AutoComplete works only as Code!.

Code is not suitable for human viewing.

However, AutoComplete seems to filter only the value target.

My first question is how to filter by Text.

2.

I didn't get the answer to the first question, so I approached the content of the second question.

good. If the policy should only filter by Value, I would like to put the DataSource item itself in Value.

In other words, if the item is People, I want to put People in Value. So I want to have an instance of People selected by AutoComplete as Value. But how?

<AutoCompleteFieldSettings Value="???" />

How do I get into ????

Thank you!

[Berly Christopher]

Hi Seil, 

  

Greetings from Syncfusion support.  

  

We would like to inform you that, in the AutoComplete component, the search and filter works based on the value field alone. Mapping text field for AutoComplete will only update the text to list items in popup but functionalities like sorting and filtering will be performed based on the value field. So, you can bind only the value field based on the component design.  

  

To filter items in AutoComplete based on text field, use Query of DataManager using the Filtering event. The filtered data can be again updated using the UpdateData method. Kindly refer the below code example. 

  

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Data 

 

<SfAutoComplete @ref="autoObj" ID="autocomplete" TValue="string" TItem="Games" Placeholder="e.g. Australia" DataSource="@LocalData"> 

    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings> 

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

</SfAutoComplete> 

 

@code { 

    SfAutoComplete<string, Games> autoObj; 

    public Query query; 

 

    public class Games 

    { 

        public string ID { get; set; } 

        public string Text { get; set; } 

    } 

    List<Games> LocalData = new List<Games> { 

    new Games() { ID= "Game1", Text= "American Football" }, 

    new Games() { ID= "Game2", Text= "Badminton" }, 

    new Games() { ID= "Game3", Text= "Basketball" }, 

    new Games() { ID= "Game4", Text= "Cricket" }, 

    new Games() { ID= "Game5", Text= "Football" }, 

    new Games() { ID= "Game6", Text= "Golf" }, 

    new Games() { ID= "Game7", Text= "Hockey" }, 

    new Games() { ID= "Game8", Text= "Rugby"}, 

    new Games() { ID= "Game9", Text= "Snooker" }, 

    new Games() { ID= "Game10", Text= "Tennis"}, 

    }; 

 

    public async Task OnFiltering(FilteringEventArgs e) 

    { 

        e.PreventDefaultAction = true; 

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

        { 

            Field = "ID", 

            value = e.Text, 

            Operator = "startswith", 

            IgnoreCase = true 

        }); 

 

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

    } 

 

} 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/155216/ze/AutoComplete_Filtering_Text_155216-43733775  

  

Regards, 

Berly B.C  

  

[Seil]

Thanks!

It works well as guided.

In fact, I already knew how to do it through another thread, but it malfunctioned.

From the answers, I guess there might be other problems, and eventually I found it to be asynchronous.

I wrote a way to get the entire list remotely once in Edit mode via EditTemplete and use the imported list once during Filtering.

It consisted of code in EditTemplete. If this is due to the behavior of the thread, the list was created and then called, and the desired result was obtained.

Perhaps it was due to my lack of structural understanding.

Now it works well with Text and gives the desired result. One thing that is unfortunate is that the highlight still works as code.

Thank!

[Seil]

Sorry

Now I have confirmed that the control I wanted is a ComboBox, not an AutoComplete.

I am embarrassed because it works so well. Sorry for the confusion.

[Berly Christopher]

Hi Seil, 

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

 

  

Regards, 

Berly B.C 

[Steven Cramer]

The Sample above does not filter by text.

[Priyanka Karthikeyan]

Hi Steven Cramer,

Sorry for the inconvenience. In AutoComplete component, to filter the value using more than one fields, you can use the predicate of DataManager. Please refer to the below code

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

<div class="col-lg-12 control-section">

    <div class="control-wrapper">

        <label class="example-label">Select a country</label>

        <SfAutoComplete TValue="string" @ref="AutocompleteObj" TItem="Countries" IgnoreAccent="true" IgnoreCase="true" Placeholder="e.g. Australia" DataSource="@Country">

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

            <AutoCompleteEvents TValue="string" TItem="Countries" Filtering="OnFilter" />

        </SfAutoComplete>

    </div>

</div>

@code {

    private async Task OnFilter(FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var pre = new WhereFilter();

        var predicate = new List<WhereFilter>();

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

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

        pre = WhereFilter.Or(predicate);

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

        await AutocompleteObj.FilterAsync(Country, query);

    }

}

Sample: https://blazorplayground.syncfusion.com/BjVgMWBZznRjdTXi

Regards,

Priyanka K