AutoComplete find by value and get the key

[Yaron Amar]

I have a simple Key Value object that I fill with various key value pairs of objects i.e Countries.

I need to be able to find a pair by its value (country Name) but bind its key (CountryId).

When I try doing that I get an error or I can only find by the Key.

 public class KeyValue

    {

        public int? Id { get; set; }

        public string Name { get; set; }

    }

  List<KeyValue> Country = new List<KeyValue>();

 <SfAutoComplete  TValue="int?" TItem="KeyValue" DataSource="@Country" @bind-Value="line.CountryId" Autofill=true>

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

</SfAutoComplete>

[Ponmani Murugaiyan]

Hi Yaron,  

  

Greetings from Syncfusion support.  

  

Based on your shared information, we suspect that you want to get the selected value object using autocomplete value property. we suggest you use out GetDataByValue method to achieve your requirement.   

  

Please find the code example here: 

<SfAutoComplete @ref="Auto" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">  

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

</SfAutoComplete>  

  

<button @onclick="GetValueObject">ClickToGet the Full Object</button>  

  

<span>@AutoCompleteObject</span>  

  

@code{  

    SfAutoComplete<string, Countries> Auto;  

    public void GetValueObject()  

    {  

        this.AutoCompleteObject = this.Auto.GetDataByValue(this.Auto.Value);  

    }  

    public Countries AutoCompleteObject { get; set; }  

  

  

Please find the screen shot here:   

  

  

  

We have created the sample based on your requirement. please find the sample here:https://www.syncfusion.com/downloads/support/forum/162300/ze/AutoComplete1798781014   

  

Regards,  

Ponmani M 

[Neha]

hi , but we want the control to filter by Name property and select  the Id respective to the Name when selecting the name from list 

[Gokul Saravanan]

Hi Yaron,

Thank you for your inquiry. We have thoroughly reviewed your query, and in response, we have prepared a sample for you. You will find the attached sample that addresses your specific concern.

If, after reviewing the attached sample, you are still experiencing the issue or require further assistance, we kindly request you to attempt reproducing the problem within the provided sample.

<SfAutoComplete TValue="int?" TItem="Language" DataSource="@GetIntDataItems" AllowFiltering=true ShowPopupButton=true @bind-Index=@value>

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

</SfAutoComplete>

 

@code {

    public class Language

    {

        public int ID { get; set; }

        public string Name { get; set; }

    }

 

    public int? value = 2;

 

    private List<Language> GetIntDataItems = new List<Language>()

    {

        new Language() { Name = "Phython", ID = 0 },

        new Language() { Name = "JAVA", ID = 1 },

        new Language() { Name = "C#", ID = 2 },

        new Language() { Name = "Oracle", ID = 3 },

        new Language() { Name = ".NET", ID = 4 },

        new Language() { Name = "C++", ID = 5 }

    };

}

We have created the sample based on your requirement. please find the sample here : https://www.syncfusion.com/downloads/support/common/4977/ze/AutoComplete_ec24e065.zip

Regards,

Gokul S

[Joe Sperlak]

I'm having this same issue right now and I can tell you that the solution you offered is less than optimal. It requires you to type the ID into the autocomplete box in order for the popup to show up. I've seen multiple threads here that mention this same issue. 

The expectation is that you should be able to have it configured the way you do in your example but, you should be able to type the Name instead. As with dropdowns the user sees and interacts with the text but it's the ID that is getting saved in the background in a relational database. This is a pretty frustrating issue considering it's the first control I'm trying to use in a brand new app and it doesn't even work as one would expect. 

[Mallesh Ravi Chandran]

Hi Yaron,

We believe you might be interested in filtering the data of the autocomplete component using a text field. By default, the search and filtering operations are solely based on the Value field within the AutoComplete component. However, mapping the text field for AutoComplete will update the text displayed in the popup list items. Please note that sorting and filtering will still be performed based on the value field. In this scenario, you can set the Tvalue as string and use the Text="Name" and Value="Name" fields for displaying and filtering the data. We have prepared the sample for reference.

Sample : https://blazorplayground.syncfusion.com/embed/BjBUtYBnKerCmrwN?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Otherwise, we recommend using the combobox component with allowfiltering as true, as it allows you to map both the text and value fields for the component. With the combobox, you can map both the key and value to the component.

For further guidance and to explore a demo, please refer to the provided link.

ComboBox - https://blazor.syncfusion.com/documentation/combobox/getting-started

Sample : https://blazorplayground.syncfusion.com/embed/hNhUXEBoAbOzVkoK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Mallesh

[Charles Matvchuk]

I really don't see how this is a solution.

I want to display and search on the Name field but bind the ID Field.  I don't want to use a combo box because I want the autocomplete functionality and it is tied to a 70k table with a SfDataManager

[Yohapuja Selvakumaran]

Hi Charles Matvchuk,

Thank you for reaching out to us. We would like to clarify that the autocomplete component only supports the value field. Depending on your mapping choice, the displayed values in the popup and the bound value will vary:

Mapping Name to the Value Field: If you map the Name property to the value field, the values shown in the popup and bound value will be based on the Name.

Mapping Code to the Value Field: Conversely, if you map the Code property to the value field, the values in the popup and the bound value will reflect the Code.

Additionally, if you wish to filter the autocomplete options using the Code, you can achieve this with custom filtering. Below is a sample implementation for your reference:

 

<SfAutoComplete TValue="string" @ref="autoObj" TItem="Country" Placeholder="e.g. Australia" AllowFiltering="true" @bind-Value="AutoValue">

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

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

</SfAutoComplete>

 

@code {

 

    SfAutoComplete<string, Country> autoObj { get; set; }

 

    public string AutoValue { get; set; } = "Canada";

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

    {

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

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

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

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

        new Country() { Name = "Denmark", Code = "DK" }

    };

 

    private async Task OnFilter(FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var query = new Query().Where(new WhereFilter() { Field = "Code", Operator = "startswith", value = args.Text, IgnoreCase = true });

 

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

 

        await autoObj.FilterAsync(Countries, query);

    }

}

 

You can find a working example in the following link:

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

For more reference, you can refer to the below documentation

Documentation: https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app

Please let us know if you have any further questions or need additional assistance!

Regards,

Yohapuja S