Sorting in AutoComplete

4 Nov 20252 minutes to read

Sorting orders the displayed items in the AutoComplete popup. The default sort order is None.

The Sorting enables to sort data in the Ascending or Descending order. To enable sorting in the AutoComplete, set the SortOrder property to the required value.

The available type of sort orders are:

SortOrder	Description
None	The data source is not sorted.
Ascending	Sorts in ascending order.
Descending	Sorts in descending order.

In the following demonstration sample, the items in the data source are intentionally shuffled; the SortOrder determines whether the items are listed in ascending or descending alphanumeric order in the popup. Sorting is applied to the field used for display (as configured in field settings), is client-side only, and does not modify the underlying data. Sorting behavior follows the current culture; combine with filtering as needed (filter reduces the list, then the result is shown in the specified sort order).

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="GameFields" PopupHeight="230px" Width="300px" SortOrder="SortOrder.Descending" Placeholder="Select a game" DataSource="@Games">
    <AutoCompleteFieldSettings Value="Text" />
</SfAutoComplete>
@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    public List<GameFields> Games = new List<GameFields>()
    {
        new GameFields(){ ID= "Game1", Text= "Rugby" },
        new GameFields(){ ID= "Game2", Text= "Snooker" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Tennis" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "American Football"},
        new GameFields(){ ID= "Game9", Text= "Badminton" },
        new GameFields(){ ID= "Game10",Text= "Golf"}
    };
}