How to Add Data to the .NET MAUI Autocomplete at Runtime?

This article demonstrates how to add the data to the .NET MAUI Autocomplete (SfAutocomplete) at runtime. To achieve this, follow these steps:

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

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

Step 2: Bind the data
Bind the SocialMedias property to the ItemsSource property of Autocomplete. 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.

XAML

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

Step 3: Add the data to the SfAutoComplete while at runtime
Add a button with its Clicked event to populate data at runtime. Populate the additional data to the SocialMedias in this clicked event handler method.

XAML

<VerticalStackLayout Spacing="100">
    <editors:SfAutocomplete TextMemberPath="Name"
                            DisplayMemberPath="Name"
                            ItemsSource="{Binding SocialMedias}"/>
    <Button Text="ADD DATA" Clicked="OnButtonClicked"/>
</VerticalStackLayout>

C#

private void OnButtonClicked(object sender, EventArgs e)
{
    var viewModel = BindingContext as SocialMediaViewModel;
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Televzr", ID = 6 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Tik Tok", ID = 7 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Tout", ID = 8 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Tumblr", ID = 9 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Twitter", ID = 10 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "Vimeo", ID = 11 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "WhatsApp", ID = 12 });
    viewModel.SocialMedias.Add(new SocialMedia { Name = "YouTube", ID = 13 });
}

Output

Conclusion
I hope you enjoyed learning how to add the data to the .NET MAUI Autocomplete [SfAutocomplete] at runtime.

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 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!