LoadMore in .NET MAUI Autocomplete (SfAutocomplete)

24 Apr 20257 minutes to read

Restrict the number of suggestions displayed and have the remaining items loaded by selecting LoadMore. We can restrict maximum suggestion to be displayed with the MaximumSuggestion property.

<editors:SfAutocomplete x:Name="autocomplete"
                         ItemsSource="{Binding SocialMedias}"
                         MaximumSuggestion="2"
                         DisplayMemberPath="Name"
                         TextMemberPath="Name" />
SfAutocomplete autocomplete = new SfAutocomplete()
{
    ItemsSource = socialMediaViewModel.SocialMedias,
    MaximumSuggestion = 2,
    DisplayMemberPath = "Name",
    TextMemberPath = "Name"
};

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete LoadMore support

LoadMore text customization

The LoadMore support provides LoadMoreText. We can set the desire text for the displaying the Load more text with the property LoadMoreText.

<editors:SfAutocomplete x:Name="autocomplete"
                         ItemsSource="{Binding SocialMedias}"
                         MaximumSuggestion="2"
                         LoadMoreText="Load more items"
                         DisplayMemberPath="Name"
                         TextMemberPath="Name" />
SfAutocomplete autocomplete = new SfAutocomplete()
{
    ItemsSource = socialMediaViewModel.SocialMedias,
    MaximumSuggestion = 2,
    LoadMoreText= "Load more items"
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
};

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete LoadMoreText

LoadMore view customization

SfAutocomplete allows customizing User Interface(UI) of Load More view. To customize the load more text, add the custom UI in the LoadMoreTemplate API in SfAutocomplete, as shown in the following code snippet.

<editors:SfAutocomplete x:Name="autocomplete"
                         ItemsSource="{Binding SocialMedias}"
                         MaximumSuggestion="2"
                         DisplayMemberPath="Name"
                         TextMemberPath="Name" >
                <editors:SfAutocomplete.LoadMoreTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="LightGreen">
                            <Label Text="Load more items..." VerticalOptions="Center" FontAttributes="Bold" HorizontalOptions="Center" TextColor="Red"/>
                        </Grid>
                    </DataTemplate>
                </editors:SfAutocomplete.LoadMoreTemplate>
            </editors:SfAutocomplete>
SfAutocomplete autocomplete = new SfAutocomplete()
{
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    MaximumSuggestion = 2,
    ItemsSource = socialMediaViewModel.SocialMedias
};
autocomplete.LoadMoreTemplate = new DataTemplate(() =>
{
    var grid = new Grid();
    Label label = new Label();
    label.Text = "Load more items...";
    label.TextColor = Colors.Red;
    grid.Background = Colors.LightGreen;
    label.HorizontalOptions = LayoutOptions.Center;
    label.VerticalOptions = LayoutOptions.Center;
    label.FontAttributes = FontAttributes.Bold;
    grid.Children.Add(label);
    return grid;
});

The following gif image illustrates the result of the above code:

.NET MAUI Autocomplete LoadMoreTemplate

LoadMore Button Tapped Event

The LoadMore support provides LoadMoreButtonTapped Event. The event can be triggered only when you tap on the load more button.

<editors:SfAutocomplete x:Name="autocomplete"
                         ItemsSource="{Binding SocialMedias}"
                         MaximumSuggestion="2"
                         LoadMoreButtonTapped="autocomplete_LoadMoreButtonTapped"
                         DisplayMemberPath="Name"
                         TextMemberPath="Name" >
             </editors:SfAutocomplete>
SfAutocomplete autocomplete = new SfAutocomplete()
{
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    MaximumSuggestion = 2,
    ItemsSource = socialMediaViewModel.SocialMedias,
};
autocomplete.LoadMoreButtonTapped += Autocomplete_LoadMoreButtonTapped;

private void Autocomplete_LoadMoreButtonTapped(object? sender, EventArgs e)
{
    //Trigger when the Load More Button is Tapped
}