1. Home
  2. Forum
  3. Blazor
  4. Autocomplete No Records Found if Value not set to String

Autocomplete No Records Found if Value not set to String

I have an autocomplete with a list of  simple objects. This works:

<SfAutoComplete TValue="string" TItem="Country" Placeholder="Country..." DataSource="@Countries">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
     public class Country
     {
          public int Id { get; set; }
          public string Name { get; set; }
     }

     public List<Country> Countries
     {
          // I initialize my data here
     }
}
   

But this doesn't:

<SfAutoComplete TValue="int" TItem="Country" Placeholder="Country..." DataSource="@Countries">
    <AutoCompleteFieldSettings Value="Id" Text="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
     public class Country
     {
          public int Id { get; set; }
          public string Name { get; set; }
     }

     public List<Country> Countries
     {
          // I initialize my data here
     }
}

What I want is to set the bindable value of the selected item to be the Id, not the name (actually, even better would be the object itself - so I would like to be able to @bind-value to a Country object, but that's a separate question I guess). But if I change Value="Name" in the AutoCompleteFieldSettings to anything other than Name, I get no records found.

4 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team June 7, 2021 12:16 PM UTC

Hi Matt, 
  
Greetings from Syncfusion support. 
  
In Blazor AutoComplete, the search and filter work 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.  
  
  
So, we suggest you to map the value field alone to the AutoComplete component and filter using the text field in the filtering event with help of Filter method. Kindly refer the below code,  
  
<SfAutoComplete @ref="AutoObj" TValue="string" TItem="Countries" Placeholder="Country..." DataSource="@Country"> 
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 
    <AutoCompleteEvents TValue="string" TItem="Countries" Filtering="OnFiltering"></AutoCompleteEvents> 
</SfAutoComplete> 
 
@code { 
    SfAutoComplete<string, Countries> AutoObj; 
    public class Countries 
    { 
        public int Id { get; set; } 
        public string Name { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
        { 
            new Countries() { Name = "Australia", Id  = 1 }, 
            new Countries() { Name = "Bermuda", Id  = 2 }, 
        }; 
    public void OnFiltering(FilteringEventArgs args) 
    { 
        args.PreventDefaultAction = true; 
        var Query = new Query().Where(new WhereFilter() 
        { 
 
            Field = "Id", 
 
            value = args.Text, 
 
            Operator = "startswith", 
 
            IgnoreCase = true 
 
        }).Take(10); 
        this.AutoObj.Filter(Country, Query); 
 
    } 
} 
 
  
  
Else, if you want to use both text and value field means, we suggest you to use our ComboBox component. 
  
Regards, 
Berly B.C 


Marked as answer
MA Matt June 9, 2021 08:02 AM UTC

Thanks Berly, so just to clarify, you must bind the value of the autocomplete to the same field that you filter on, is that correct?

MA Matt June 9, 2021 08:04 AM UTC

By the way - I looked at ComboBox, thanks for the link. It looks like this is the component I need for this scenario.

BC Berly Christopher Syncfusion Team June 9, 2021 12:09 PM UTC

Hi Matt, 
  
Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon