1. Home
  2. Forum
  3. Blazor
  4. AutoComplete AutoFormat display text vs. search text (binding)

AutoComplete AutoFormat display text vs. search text (binding)

I am using Autocomplete for the first time and having difficulty retrieving Code from the example given.


I want to search by Name, and bind to Code. What am I missing??

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

Display should be Name and selected value (@bind-Value) should be Code

I can get the bind value to work if I add Value="Code", but then the display (search) is only searchable by Code. WHAT THE HECK!!!

What am I doing wrong?

3 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team June 22, 2020 09:20 AM UTC

Hi Dan, 

Greetings from Syncfusion support. 

We would like to inform you that 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. This is the component behavior, we suggest you that in order to filter the items in AutoComplete based on text field, you can map the filed in the filtering event to get rid of the reported issue. Please find the code snippet and text sample below for reference. 
 
[Index.razor] 
 
<p>AutoComplete value is: @AutoVal</p> 
 
<SfAutoComplete @ref="autoObj" ID="autocomplete" TValue="string" TItem="Countries" @bind-Value="@AutoVal" Placeholder="e.g. Australia" DataSource="@Country"> 
    <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings> 
    <AutoCompleteEvents Filtering="OnFiltering" TValue="string"></AutoCompleteEvents> 
</SfAutoComplete> 
 
@code { 
    public string AutoVal; 
 
    SfAutoComplete<string, Countries> autoObj; 
    public Query query; 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
    }; 
 
 
    public async Task OnFiltering(FilteringEventArgs e) 
    { 
        e.PreventDefaultAction = true; 
        query = new Query().Where(new WhereFilter() 
        { 
            Field = "Name", 
            value = e.Text, 
            Operator = "startswith", 
            IgnoreCase = true 
        }); 
 
        await this.autoObj.Filter(Country, query); 
    } 
 
} 
 
 
 
Please find the more details regarding the Autocomplete component functionalities and behavior.  


Please get back us, if you need further assistance. 

Regards, 
Ponmani M 


Marked as answer
AG Anthony Griggs September 2, 2021 07:57 PM UTC

Think about it... you would only ever want to "Search" the values being displayed in text. If you wanted to search values... then you would display display the value as text. This is a real UX issue and not very intuitive.


BC Berly Christopher Syncfusion Team September 3, 2021 12:00 PM UTC

Hi Anthony Griggs, 
  
We have checked the reported issue. If you want to display the values based on the mapped field means, we suggest you to provide the corresponding field name to the value in the autocomplete field settings. Based on the mapped value field, it will displayed the items and filter the data from the data source.  
  
If we misunderstood your query, please share the use case requirement elaborately that will help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon