Value Binding in AutoComplete

4 Nov 202514 minutes to read

Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are.

• bind-Value Binding
• bind-Index Binding

Bind value binding

The value binding can be achieved by using the @bind-Value attribute and it supports string, int, enum, bool and complex types. If the component value has been changed, it will affect all places where bind the variable for the @bind-value attribute. In order for the binding to work properly, the value assigned to the @bind-value attribute should be based on the field mapped to AutoCompleteFieldSettings.Value

• TValue - Specifies the type of each list item on the suggestion list.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" @bind-Value="@CountryValue" Placeholder="e.g. Australia" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

    public string CountryValue = "Canada";

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = 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" }
    };
}

Index value binding

Bind the selected item by index using the @bind-Index attribute, which supports int and nullable int. This binds to the zero-based index of the selected item.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" @bind-Index="@selectIndex" Placeholder="e.g. Australia" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

    public int? selectIndex = 1;

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = 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" }
    };
}

Value field

The AutoCompleteFieldSettings.Value property points to the field in the data model that represents the value of each item. The mapped value identifies the item to select; the display text appears in the popup list.

CSHTML

@using Syncfusion.Blazor.DropDowns

<p>Selected Value is: @SelectedValue</p>

<SfAutoComplete TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@SelectedValue">
    <AutoCompleteFieldSettings Value="Game"/>
</SfAutoComplete>

@code {
    public string SelectedValue { get; set; } = "Basketball";
    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football" },
    new Games() { ID= "Game2", Game= "Badminton" },
    new Games() { ID= "Game3", Game= "Basketball" },
    new Games() { ID= "Game4", Game= "Cricket" },
    new Games() { ID= "Game5", Game= "Football" },
    new Games() { ID= "Game6", Game= "Golf" },
    new Games() { ID= "Game7", Game= "Hockey" },
    new Games() { ID= "Game8", Game= "Rugby"},
    new Games() { ID= "Game9", Game= "Snooker" },
    new Games() { ID= "Game10", Game= "Tennis"},
  };
}

Primitive type binding

Bind arrays of primitive data (strings or numbers) to the AutoComplete and use @bind-Value for selection. For primitive lists, field settings can be inferred or set explicitly.

The following code demonstrates an array of strings as the data source.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue=string TItem=string Placeholder="Select a game" DataSource="@data" @bind-Value="@SelectedValue" Width="300px">
</SfAutoComplete>

@code {
    public string SelectedValue { get; set; } = "Cricket";
    public string[] data = { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey" };
}

The following code demonstrates an array of integers as the data source.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue=int? TItem=int? DataSource="@data" Width="300px" @bind-Value="@SelectedValue">

</SfAutoComplete>

@code {
    public int? SelectedValue { get; set; } = 1022;
    public int?[] data = { 1011, 1022, 1044, 1066 };
}

Object binding

Bind object data to the AutoComplete’s @bind-Value and map the class appropriately to TValue.

In the following example, the Name field is mapped to AutoCompleteFieldSettings.Value.

CSHTML

@using Syncfusion.Blazor.DropDowns

<p>Selected Value is: @SelectedValue.Name</p>

<SfAutoComplete TValue="Games" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@SelectedValue">
    <AutoCompleteFieldSettings Value="Name"/>
</SfAutoComplete>

@code {

    public Games SelectedValue { get; set; } = new Games() { ID = "Game7", Name = "Hockey" };
    public class Games
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Name= "American Football" },
    new Games() { ID= "Game2", Name= "Badminton" },
    new Games() { ID= "Game3", Name= "Basketball" },
    new Games() { ID= "Game4", Name= "Cricket" },
    new Games() { ID= "Game5", Name= "Football" },
    new Games() { ID= "Game6", Name= "Golf" },
    new Games() { ID= "Game7", Name= "Hockey" },
    new Games() { ID= "Game8", Name= "Rugby"},
    new Games() { ID= "Game9", Name= "Snooker" },
    new Games() { ID= "Game10", Name= "Tennis"},
  };
}

Enum binding

Bind enum data to the AutoComplete with @bind-Value. The following example shows how to obtain a string value from enumeration data.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete TValue="Values" TItem="string" Placeholder="e.g. Australia" Width="300px" DataSource="@EnumValues" @bind-Value="@SelectedValue">
</SfAutoComplete>

@code {

    public string[] EnumValues = Enum.GetNames(typeof(Values));
    public Values SelectedValue { get; set; } = Values.Canada;

    public enum Values
    {
        Australia,
        Bermuda,
        Canada,
        Denmark,
        India,
        US
    }
}

Show or hide clear button

Use the ShowClearButton property to specify whether to show or hide the clear button. When the clear button is clicked, the Value, Text, and Index properties are reset to null.

NOTE

If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)

The following sample demonstrates the string used as TValue. So, clear the value using the clear button, it will be set to null as it’s the default value of the respective type.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete TValue="string" TItem="string" ShowClearButton=false Width="300px" DataSource="@data">
</SfAutoComplete>

@code {
    public string[] data = { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey" };
}

Dynamically change TItem

The TItem property can be changed dynamically by defining the datasource type of the AutoComplete component with the help of the @typeparam directive. The following sample demonstration explains how to change the TItem dynamically with different type of datasource.

Creating generic AutoComplete component

First, create a AutoComplete.razor file as a parent component in the /Pages folder. Also, add a Parameter property for a List as <TItem> and TValue.

RAZOR

@using Syncfusion.Blazor.DropDowns;
@typeparam TValue;
@typeparam TItem;

<SfAutoComplete TValue="TValue" Width="300px" TItem="TItem" @bind-Value="@SelectedValue" Placeholder="Please select a value" DataSource="@DataList">
    <AutoCompleteFieldSettings Value="Text" />
</SfAutoComplete>

@code {
    [Parameter]
    public List<TItem> DataList { get; set; }

    [Parameter]
    public TValue SelectedValue { get; set; }

    [Parameter]
    public EventCallback<TValue> SelectedValueChanged { get; set; }
}

Usage of generic component with different type

Render the generic AutoComplete component with the required TValue and TItem in the corresponding Razor components.

Here, the AutoComplete component uses TValue as string in /Index.razor and TValue as nullable int in /Counter.razor.

[Index.razor]

RAZOR

<AutoComplete TValue="string" TItem="Games" @bind-SelectedValue="@value" DataList="@LocalData">
</AutoComplete>

@code{
    public string value { get; set; } = "Football";
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
}

[Counter.razor]

RAZOR

<AutoComplete TValue="int?" TItem="ZipCode" @bind-SelectedValue="@value" DataList="@LocalData">
</AutoComplete>

@code {
    public int? value { get; set; } = 102767;
    public class ZipCode
    {
        public int? ID { get; set; }
        public int? Text { get; set; }
    }
    List<ZipCode> LocalData = new List<ZipCode> {
            new ZipCode() { ID= 1, Text= 102789 },
            new ZipCode() { ID= 2, Text= 102776 },
            new ZipCode() { ID= 3, Text= 102767 },
            new ZipCode() { ID= 4, Text= 102745 }
        };
    }

Two way binding

Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion^® Blazor AutoComplete component, Use the @bind-Value directive to bind the value of the AutoComplete

CSHTML

@using Syncfusion.Blazor.DropDowns;


<SfAutoComplete Placeholder="Select Assignee" Width="300px" TItem="MemberModel" TValue="string" DataSource="@Members" @bind-Value="@selectedAssignee.SelectedValue">
    <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

    public MemberModel selectedAssignee = new MemberModel();

    public class MemberModel
    {
        public int? Id { get; set; }
        public string Name { get; set; }
        public string SelectedValue { get; set; } = "Robert";
    }

    List<MemberModel> Members = new List<MemberModel>()
    {
        new MemberModel() {Id = 0, Name="John" },
        new MemberModel() {Id = 1, Name="Andrews" },
        new MemberModel() {Id = 2, Name="Robert" },

    };

}

Programmatically clearing value

Clear the value programmatically by calling ClearAsync() on a component instance reference. For example, bind a button click to invoke ClearAsync() and reset the control’s value.

RAZOR

@using Syncfusion.Blazor.DropDowns;
<button @onclick="Clear">Clear</button>

<SfAutoComplete @ref="GameField" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue">
    <AutoCompleteFieldSettings Value="Name"/>
</SfAutoComplete>

@code {

    SfAutoComplete<string, Games> GameField;

    public string GameValue { get; set; } = "Football";

    public class Games
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Name= "American Football" },
    new Games() { ID= "Game2", Name= "Badminton" },
    new Games() { ID= "Game3", Name= "Basketball" },
    new Games() { ID= "Game4", Name= "Cricket" },
    new Games() { ID= "Game5", Name= "Football" },
    new Games() { ID= "Game6", Name= "Golf" },
    new Games() { ID= "Game7", Name= "Hockey" },
    new Games() { ID= "Game8", Name= "Rugby"},
    new Games() { ID= "Game9", Name= "Snooker" },
    new Games() { ID= "Game10", Name= "Tennis"},
    };

    public async Task Clear()
    {
        this.GameField.ClearAsync();
    }

}