Autocomplete search and display text with ID value behind the scenes.

Question

I've already seen several examples of how the autocomplete works but it doesn't work in the expected manner. In my provided code where TValue = int?, which was pulled from a similar example that support provided, you have to search by the ID value and not the text value. Even though the text displays properly in the dropdown, you had to know the ID to find it. If you change to TValue = string, then you can search for the text but then you can't have the ID value bound using @bind-Value. In any relational database you are going off ID values and not the text so this becomes of little use.

Is there any possible way to make this work??

Mallesh Ravi Chandran · Answer

Hi Joe,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=bootstrap5Otherwise, 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-startedSample : https://blazorplayground.syncfusion.com/embed/hNhUXEBoAbOzVkoK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5Regards,Mallesh