Value Binding in AutoComplete

16 Jan 202414 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 you 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

The Index value binding is achieved by using the @bind-Index attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index.

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 AutoComplete AutoCompleteFieldSettings.Value property point to the corresponding names of the model. The AutoCompleteFieldSettings.Value mapped to the component maintains the unique value of the item in the data source, and display the text in the popup list items.

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

The AutoComplete has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the @bind-Value attribute of the AutoComplete

The following code demonstrates array of string as datasource to the AutoComplete component.

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 array of int as datasource to the AutoComplete component.

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 the Object data to the @bind-Value attribute of the DropdownList component, this is, You can map the class name to TValue.

In the following example, the Name column has been mapped to the 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 the enum data to the @bind-Value attribute of AutoComplete component. The following code helps you to get a string value from the 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, if you 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

Then, render the Generic AutoComplete component with the required TValue and TItem in the respective razor components.

Here, the AutoComplete component is rendered with the TValue as a string type in the /Index.razor file and the AutoComplete component with TValue as an int nullable type in the /Counter.razor file.

[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, you can 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

You can clear the value programmatically by accessing the ClearAsync() method through an instance of the AutoComplete. You can bind the click event of a button to the ClearAsync() method. When the button is clicked, it will trigger the ClearAsync() method on the AutoComplete, clearing its 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();
    }

}