Getting Started with .NET MAUI Autocomplete (SfAutocomplete)

22 Mar 202410 minutes to read

This section explains how to add the Autocomplete control and bind data to it. This section covers only the basic features needed to get started with the Syncfusion Autocomplete control.

To get start quickly with our .NET MAUI Autocomplete, you can check the below video.

Adding a .NET MAUI Autocomplete reference

Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Autocomplete to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Inputs and then install it.

Handler registration

In the MauiProgram.cs file, register the handler for Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace AutocompleteSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Create a Simple .NET MAUI Autocomplete

The .NET MAUI Autocomplete control is configured entirely in C# code or by using XAML markup. The following steps explain how to create a .NET MAUI Autocomplete (SfAutocomplete) and configure its elements:

Adding the .NET MAUI Autocomplete control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample:

XAML

xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"

C#

using Syncfusion.Maui.Inputs;

Step 3: Set the control to content in ContentPage.

XAML

<ContentPage.Content>    
    <editors:SfAutocomplete x:Name="autocomplete" />
</ContentPage.Content>

C#

SfAutocomplete autocomplete = new SfAutocomplete(); 
Content = autocomplete;

Populating items using data binding

The .NET MAUI Autocomplete can be bound to an external data source using the ItemsSource property. Now, let us create Model and ViewModel classes to populate items with social media details in Autocomplete.

Step 1: Create a simple model class ‘SocialMedia’ with fields ‘ID’ and ‘Name’, and then populate social media data in the ‘SocialMediaViewModel’.

C#

//Model.cs
public class SocialMedia
{
    public string Name { get; set; }
    public int ID { get; set; }
}

//ViewModel.cs
public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }
    public SocialMediaViewModel()
    {
        this.SocialMedias = new ObservableCollection<SocialMedia>();
        this.SocialMedias.Add(new SocialMedia() { Name = "Facebook", ID = 0 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Google Plus", ID = 1 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Instagram", ID = 2 });
        this.SocialMedias.Add(new SocialMedia() { Name = "LinkedIn", ID = 3 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Skype", ID = 4 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Telegram", ID = 5 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Televzr", ID = 6 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Tik Tok", ID = 7 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Tout", ID = 8 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Tumblr", ID = 9 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Twitter", ID = 10 });
        this.SocialMedias.Add(new SocialMedia() { Name = "Vimeo", ID = 11 });
        this.SocialMedias.Add(new SocialMedia() { Name = "WhatsApp", ID = 12 });
        this.SocialMedias.Add(new SocialMedia() { Name = "YouTube", ID = 13 });
    }
}

Step 2: Populate data in .NET MAUI Autocomplete.

Now, populate this ‘SocialMediaViewModel’ data in the Autocomplete control by binding to the ItemsSource property.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             xmlns:local="clr-namespace:AutocompleteSample"             
             x:Class="AutocompleteSample.MainPage">

       <ContentPage.BindingContext>
            <local:SocialMediaViewModel />
       </ContentPage.BindingContext>

       <ContentPage.Content>
            <!--Setting ItemsSource-->
            <editors:SfAutocomplete x:Name="autocomplete" 
                                    WidthRequest="250"
                                    ItemsSource="{Binding SocialMedias}" />
        </ContentPage.Content>
</ContentPage>

C#

SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
autocomplete.BindingContext = socialMediaViewModel;
autocomplete.ItemsSource = SocialMediaViewModel.SocialMedias;

NOTE

Set the ‘SocialMediaViewModel’ instance as the BindingContext of your control; this is done to bind properties of ‘SocialMediaViewModel’ to Autocomplete.

Step 3: Set the TextMemberPath and DisplayMemberPath.

The .NET MAUI Autocomplete control is populated with the list of social media. However, because the ‘SocialMedia’ model contains two properties ‘Name’ and ‘ID’, it is necessary to intimate which property should be a display value in the selection box portion and drop-down suggestion of the Autocomplete control.

TextMemberPath - This property path is used to get the value for displaying in the selection box portion of the .NET MAUI Autocomplete control when an item is selected. The default value is String.Empty.

DisplayMemberPath - This property path is used to specify the name or path of the property displayed for each data item in the drop-down list. The default value is String.Empty.

XAML

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250" 
                        DisplayMemberPath = "Name"
                        TextMemberPath = "Name"
                        ItemsSource="{Binding SocialMedias}" />

C#

autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";

Selection

The .NET MAUI Autocomplete allows the user to select an item from the drop-down list by clicking the Enter key or losing focus from the text box.

XAML

<editors:SfAutocomplete x:Name="autocomplete"
                        WidthRequest="250"
                        DisplayMemberPath = "Name"
                        TextMemberPath = "Name"
                        ItemsSource="{Binding SocialMedias}" />

C#

autocomplete.DisplayMemberPath = "Name";
autocomplete.TextMemberPath = "Name";

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

You can find the complete getting started sample of .NET MAUI Autocomplete from this link.

Text

The Text property is used to get the user-submitted text in the SfAutoComplete. The default value of the Text property is string.Empty.

NOTE

You can refer to our .NET MAUI Autocomplete feature tour page for its groundbreaking feature representations. You can also explore our .NET MAUI Autocomplete Example that shows you how to render the Autocomplete in .NET MAUI.