How to add a suggestion list in .NET MAUI Autocomplete (SfAutocomplete)?

This article demonstrates how to add a suggestion list in the .NET MAUI Autocomplete [SfAutocomplete] control. The Autocomplete can be bound to an external source of data using the ItemsSource property.

Steps
Step 1: Populate the data in ViewModel
Create a model class named SocialMedia that contains information such as social media ID and name. Generate a collection of social media data in the ViewModel class.

C#

public class SocialMedia
{
    public string Name { get; set; }
    public int ID { get; set; }
}


using System.Collections.ObjectModel;

public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }

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

Step 2: Bind the data
Bind the SocialMedias property to the ItemsSource property of Autocomplete.

XAML

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

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

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

The TextMemberPath 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 DisplayMemberPath property path is used to specify the name or path of the property displayed for each data item in the drop-down list.

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

Output

Conclusion
I hope you enjoyed learning how to add a suggestion list in the .NET MAUI Autocomplete (SfAutocomplete).

Refer to our .NET MAUI Autocomplete’s feature tour page to learn about its other groundbreaking features. You can explore our .NET MAUI Autocomplete documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Autocomplete (SfAutocomplete) and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!