The .NET MAUI Autocomplete control is highly optimized to load and populate suggestions quickly from large amounts of data depending on the user’s input characters. A quick-start project that shows how to create and configure the Syncfusion MAUI Autocomplete control. This project also includes a code snippet to populate the control’s data source, set a custom height and width to the control, customize placeholder text, change the filter type, and hide clear button.
Step 1: Add the NuGet to the project and 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 2: Set the AutoComplete control to content in ContentPage.
<ContentPage.Content>
<editors:SfAutocomplete x:Name="autocomplete" />
</ContentPage.Content>
[C#]
SfAutocomplete autocomplete = new SfAutocomplete();
Content = autocomplete;
Step 1: Create a model class named SocialMedia that contains information such as social media's ID and name. And generate the collection of social media data in the ViewModel class.
//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: Binding the SocialMedias property to the ItemsSource property of AutoComplete.
<?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>
Make sure that you have the compatible versions of Visual Studio with .NET MAUI workloads and .NET SDK version in your machine before starting to work on this project. Refer to System Requirements for .NET MAUI.
To run this application, you need to first clone the getting-started-with-the-dotnet-maui-autocomplete-control repository and then open it in Visual Studio 2022. Now, simply build and run your project to view the output.
If you are facing a path too long exception when building this example project, close Visual Studio rename the repository to short, and build the project.
Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.
Select a single item from the suggestion list based on the entered text.
Display hints using the placeholder text. This text will be displayed only if no item is selected, or the edit text is empty.
Data-binding support works for all popular data sources and displays data based on the display member path. It automatically generates items from a data-bound collection. The application can be designed in the MVVM pattern.
Apply your own filter logic to display custom filtered items. E.g., in the above image, AutoComplete filtered the cities based on country name.
Adjust the dropdown height based on the number of items to enhance readability without scrolling.
Learn More about .NET MAUI Autocomplete
Suggest a feature or report a bug
Syncfusion's .NET MAUI UI Controls library is the only suite that you will ever need to build an application since it contains over 40 high-performance, lightweight, modular, and responsive UI controls in a single package. In addition to Autocomplete, we provide popular .NET MAUI Controls such as DataGrid, Charts, Scheduler, ListView, and Excel Library.
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today we provide 1800+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and .NET MAUI), and desktop development (Windows Forms, WPF, WinUI, UWP, Flutter, and .NET MAUI). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
[email protected] | www.syncfusion.com | Toll Free: 1-888-9 DOTNET