Chandradev's Blog

Recently i used this control in one of my client project. I did like this

Step 1: Install the Blazorised Controls

Step2 : write the below code like given below.

<h3>MultiAutoComplete</h3>
@page "/multitext"

<Autocomplete TItem="Countries"
              TValue="string"
              Data="@LocalData"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Code)"
              Placeholder="Search..."
              FreeTyping
              Multiple
              @bind-SelectedValues="multipleSelectionData"
              @bind-SelectedTexts="multipleSelectionTexts">
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Values: @string.Join(',', multipleSelectionData)
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Texts: @string.Join(',', multipleSelectionTexts)
    </FieldBody>
</Field>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Clear Text</button>

@code
{
    List<string> multipleSelectionData;
    List<string> multipleSelectionTexts = new();

    public class Countries
    {
        public string? Name { get; set; }
        public string? Code { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        multipleSelectionData = new List<string>() { };
        await base.OnInitializedAsync();
    }

    public List<Countries> LocalData = new List<Countries> {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" }
    };

    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
        multipleSelectionData = new List<string>() { };
        this.multipleSelectionTexts.Clear();
    }

}