Selection in AutoComplete

13 Mar 202424 minutes to read

Get selected value

Get the selected value of the AutoComplete component in the ValueChange event using the ChangeEventArgs.Value property.

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></AutoCompleteEvents>
</SfAutoComplete>

@code {
    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"},
    };

    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The DropDownList Value is: ", args.Value);
    }

}

Get the complete object list of the selected value in the ValueChange event using the ChangeEventArgs.ItemData property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></AutoCompleteEvents>
</SfAutoComplete>

@code {

    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"},
    };

    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine("The complete data of the selected value is: ", args.ItemData);
    }
}

Preselected value on OnInitializedAsync

Bind the pre-selected value to the AutoComplete component using the @bind-Value attribute. Assign the value property inside the OnInitializedAsync lifecycle. The following sample shows how to bind the value on the initial rendering of the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

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

@code {
    public string ddlValue { get; set; }

    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"},
    };

    protected override async Task OnInitializedAsync()
    {
        ddlValue = "Game4";
    }
}

Blazor AutoComplete with pre-select value

Programmatically change the selected value

Change the component value programmatically or externally by the component instance using the @ref attribute of the component. The following sample shows how to change the value of the component using click event of the button component.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfAutoComplete TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
        <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
    </SfAutoComplete>
</div>
<div>
    <SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string ddlValue { get; set; } = "Tennis";

    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"},
    };

    public void OnBtnClick()
    {
        ddlValue = "Cricket";
    }
}

Blazor AutoComplete with pre-select value before

ValueChange event

The ValueChange event is triggered when the value of the AutoComplete component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" ValueChange="@ValueChangeHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void ValueChangeHandler(ChangeEventArgs<string, GameFields> args)
    {
        // Here, you can customize your code.
    }
}

OnValueSelect event

The OnValueSelect event is triggered when you select any value in the AutoComplete component. Get the necessary arguments including the ChangeEventArgs.ItemData. Also, prevent the selection of items by setting the ChangeEventArgs.Cancel property as true provided by the event arguments.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" Placeholder="Select a game" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" OnValueSelect="@OnValueSelecthandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void OnValueSelecthandler(SelectEventArgs<GameFields> args)
    {
        // Here, you can customize your code.
    }
}

Preselect value with index

Bind the pre-selected value to the component using the @bind-Index attribute. It binds the respective value present in the specified index position of the datasource.

NOTE

It will be dependent on the SortOrder type. It will bind the value to the component with the sorted data if the corresponding property is defined.

The following sample shows how to bind the index on the initial rendering.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

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

@code {
    public int? ddlIndex { get; set; } = 4;

    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"},
    };
}

Blazor AutoComplete with bind-index

Autofill the selected value

The Autofill property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component’s data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of Autofill is false.

RAZOR

@using Syncfusion.Blazor.DropDowns


<SfAutoComplete TValue="string" TItem="Games" Autofill=true Placeholder="e.g. Basketball" DataSource="@GamesList">
    <AutoCompleteFieldSettings Value="Game" />
</SfAutoComplete>

@code{

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

    List<Games> GamesList = 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"},
    };

}

Blazor AutoComplete with Autofill property

Get selected item by value

Get the entire object belonging to the value selected in the component using the GetDataByValue method.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfAutoComplete @ref="autoObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" @bind-Value="@autoValue" DataSource="@LocalData">
        <AutoCompleteFieldSettings Value="Game"></AutoCompleteFieldSettings>
    </SfAutoComplete>
</div>
<div>
    <SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string autoValue { get; set; }

    SfAutoComplete<string, Games> autoObj;

    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"},
    };

    public void OnBtnClick()
    {
        var DropDownValue = autoObj.GetDataByValue(autoValue);
        Console.WriteLine(DropDownValue);
    }
}

Focus the next component on selection

Focus the component programmatically using the FocusAsync public method. It will set focus instantly to the AutoComplete component when invoking it.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading

<h4>DropDown A</h4>
<SfAutoComplete ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Countries" Closed="@(e => OnClose(e, DropObj2))"></AutoCompleteEvents>
</SfAutoComplete>
<h4>DropDown B</h4>
<SfAutoComplete @ref="DropObj2" ID="dropdown2" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>
@code {
    SfAutoComplete<string, Countries> DropObj2;

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

        public string Code { get; set; }
    }

    List<Countries> Country = 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" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public async Task OnClose(ClosedEventArgs args, SfDropDownList<string, Countries> componentRef)
    {
        Thread tread = new Thread(
             async () =>
             {
                 Thread.Sleep(5);
                 await componentRef.FocusAsync();
             }
          );
        tread.Start();
        await Task.CompletedTask;
    }
}

Prevent reload on form submit

To prevent the page from reloading when using the AutoComplete component inside a form, you can specify the type of the button as “button” by utilizing the HTMLAttributes property. This will prevent the page from reloading when the button is clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;

<form>
    <div>
        <label class="example-label">Select a game</label>
        <SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
            <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </div>
    <div class="submit-btn">
        <SfButton HtmlAttributes="@TypeChange" IsPrimary="true">Submit</SfButton>
    </div>
</form> 

@code {
    private Dictionary<string, object> TypeChange = new Dictionary<string, object>() 
    { 
        { "type", "button"} 
    }; 

    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };
}

Programmatically clear the selected value

To clear the Autocomplete value programmatically, use the ClearAsync method. This method clears out the selected values from the SfAutocomplete<TValue, TItem> component and sets the Value and Index properties to null.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

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

<div style="margin-top:10px">
    <SfButton Content="Clear the value" OnClick="CrearValue"></SfButton>
</div>


@code {
    
    SfAutoComplete<string, Games> autoObj;

    public string ddlValue { get; set; } = "Tennis";

    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"},
    };

    public void CrearValue()
    {
        autoObj.ClearAsync();
    }
}

Blazor AutoComplete with programatically clear value

Programmatically trigger onChange event

Trigger the ValueChange event manually by using the instance (taken from @ref attribute) of the AutoCompleteEvents. In the following example, the ValueChange event is invoked inside the Created event handler. As per the following code, it will trigger once the component is created or rendered on the page.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 
    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
    <AutoCompleteEvents @ref="dropObj" TValue="string" TItem="Countries" Created="onCreate" ValueChange="ChangeCountry"></AutoCompleteEvents>
</SfAutoComplete> 

@code {
    public class Countries 
    { 
        public string Name { get; set; } 

        public string Code { get; set; } 
    } 

    List<Countries> Country = 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" }, 
        new Countries() { Name = "France", Code = "FR" }, 
        new Countries() { Name = "Finland", Code = "FI" }, 
        new Countries() { Name = "Germany", Code = "DE" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    };
    public AutoCompleteEvents<string, Countries> dropObj { get; set; } 

    public void onCreate() 
    {
        var args = new Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries>() { Value = "Cameroon" };
        this.dropObj.ValueChange.InvokeAsync(args); 
    } 
    public void ChangeCountry(ChangeEventArgs<string, Countries> args)
    {
        Console.WriteLine("Value has been changed!!");
    }
}

Programmatically focus in and focus out the component

In order to trigger the FocusAsync() and FocusOutAsync() methods using the instance of the autocomplete, you can use buttons. You can bind the click event of the button to the FocusAsync() and FocusOutAsync() methods. When the button is clicked, it triggers the corresponding method on the autocomplete.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<button @onclick="Focus">Focus</button>

<button @onclick="FocusOut">FocusOut</button>

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

@code {
    SfAutoComplete<string, Games> AutoObj;

    public string GameValue { get; set; } = "American 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"},
    };

    public void Focus()
    {
        this.AutoObj.FocusAsync();
    }

    public void FocusOut()
    {
        this.AutoObj.FocusOutAsync();
    }

}

While focusing and focus out the following event get triggered.

Focus event

The Focus event will trigger when the component gets focused.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Focus="@FocusHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void FocusHandler(Object args)
    {
        // Here, you can customize your code.
    }
}

Blur event

The Blur event will trigger when focus moves out from the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games" Placeholder="Select a game">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Blur="@BlurHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void BlurHandler(Object args)
    {
        // Here, you can customize your code.
    }
}