We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

typing value with value and text fields

We have a AutoComplete that allows the user to select a product

the product has an ID and a NAME

With the following

<SfAutoComplete TValue="string" TItem="SupplyVendorProductModel" AllowCustom="false"
      AllowFiltering="true" DataSource="@autoCompleteProducts">
<AutoCompleteFieldSettings Value="productId" ></AutoCompleteFieldSettings>

all works and the user can enter the product id into the autocomplete and hit tab to navigate to the next field

but we want to display the id and name in the autocomplete. se when changing to

<SfAutoComplete TValue="string" TItem="SupplyVendorProductModel" AllowCustom="false"
      AllowFiltering="true" DataSource="@autoCompleteProducts">
<AutoCompleteFieldSettings Value="productId" Text="IdAndDescription"></AutoCompleteFieldSettings>

the user can now see the id and name but typing the id and hitting tab doesnt work any longer. user would have to type the id and name

thought about templates but there is no template for the display of the value only for the list (itemtemplate)

is there any way to make this work?



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team February 1, 2023 03:05 PM UTC

Based on the shared information, we suspect that you are trying to display the selected Text and Value fields in the AutoComplete component. By default, the AutoComplete component does not support a Value template. You can try Syncfusion's DropdownList component instead of the AutoComplete component for your requirements. You can also use the AllowFiltering property in the DropdownList component. We have prepared a sample for your requirement using the DropdownList component and shared it below for your reference. Please refer to the documentation and online demo shared below for more information.

[DropdownList component]

@using Syncfusion.Blazor

@using Syncfusion.Blazor.DropDowns



<h2>Dropdown List</h2>

<div style="margin:130px auto;width:300px">


    <SfDropDownList TValue="string" TItem="EmployeeData" CssClass="template" AllowFiltering="true" Placeholder="Select a employee" DataSource="@Data">

        <DropDownListTemplates TItem="EmployeeData">


                <span class="ename">@((context as EmployeeData).FirstName) - @((context as EmployeeData).Id)</span>



        <DropDownListFieldSettings Text="FirstName" Value="Id"></DropDownListFieldSettings>



@code {

    Type models = typeof(EmployeeData);

    public class EmployeeData


        public string FirstName { get; set; }

        public string Id { get; set; }


    List<EmployeeData> Data = new List<EmployeeData>


        new EmployeeData() { FirstName = "Andrew Fuller",Id= "7" },

        new EmployeeData() { FirstName = "Anne Dodsworth",Id= "1" },

        new EmployeeData() { FirstName = "Janet Leverling",Id="3" },

        new EmployeeData() { FirstName = "Laura Callahan",Id= "2" },

        new EmployeeData() { FirstName = "Margaret Peacock",Id= "6" },

        new EmployeeData() { FirstName = "Michael Suyama", Id= "9" },

        new EmployeeData() { FirstName = "Nancy Davolio",Id= "4" },

        new EmployeeData() { FirstName = "Robert King",Id= "8" },

        new EmployeeData() { FirstName = "Steven Buchanan",Id= "10" },




Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DLLTemplate1271794959

Documentation: https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template

Online Demo: https://blazor.syncfusion.com/demos/dropdown-list/template?theme=fluent

Live Chat Icon For mobile
Up arrow icon