Introducing the .NET MAUI Autocomplete Control

#dotnet #csharp #maui #mobile

An Autocomplete control was one of the most-requested controls by our mobile app developers. We atSyncfusion understand the requirement for this essential control and have now delivered the.NET MAUI Autocomplete control in our2022 Volume 3 release.

In this article, we will see the key features of the new .NET MAUI Autocomplete control and the steps to get started with it.

.NET MAUI Autocomplete

The .NET MAUI Autocomplete control is highly optimized to load and populate suggestions from a massive volume of data depending on the users’ input characters. It allows users to select one or more items from the suggestion list. It displays the selected items in the input view as text and removes the text when the close buttons are tapped.

Getting started with .NET MAUI Autocomplete

This section explains the steps to getting started with .NET MAUI Autocomplete control, populating it with data, and filtering the suggestions.

Step 1 : Syncfusion .NET MAUI components are available on theNuGet Gallery. To add theSfAutoComplete to your project, open theNuGet package manager in Visual Studio. Search forSyncfusion.Maui.Inputs , and then install the NuGet package.

Step 2 : Then, register the handler for Syncfusion core in theMauiProgram.cs file.

usingSyncfusion.Maui.Core.Hosting;usingSyncfusion.Maui.ListView.Hosting;publicstaticclassMauiProgram{publicstaticMauiAppCreateMauiApp(){varbuilder=MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureSyncfusionCore().ConfigureSyncfusionListView().ConfigureFonts(fonts=>{fonts.AddFont("OpenSans-Regular.ttf","OpenSansRegular");fonts.AddFont("OpenSans-Semibold.ttf","OpenSansSemibold");});returnbuilder.Build();}}

Step 3 : Import the SfAutoComplete namespace in the XAML page.

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

Step 4 : Then, initialize an empty autocomplete control like in the following code.

<inputs:SfAutocompletex:Name="autocomplete"WidthRequest="200"/>

Step 5 : Now, create the required data to populate the suggestions list. This includes creation of the examplePerson class, andPersonsViewModel with the list ofPerson objects.

publicclassPerson{publicstringName{get;set;}publicstringSecondName{get;set;}}publicclassPersonsViewModel:INotifyPropertyChanged{readonlyIList<Person>source;PersonselectedPerson;privatestringselectedItem;publicObservableCollection<Person>Persons{get;privateset;}publicList<string>Items{get;privateset;}publicPersonSelectedPerson{get{returnselectedPerson;}set{if(selectedPerson!=value){selectedPerson=value;OnPropertyChanged("SelectedPerson");}}}publicstringSelectedItem{get{returnselectedItem;}set{if(selectedItem!=value){selectedItem=value;OnPropertyChanged("SelectedItem");}}}publicPersonsViewModel(){source=newList<Person>();CreatePersonCollection();SelectedPerson=Persons.Skip(3).FirstOrDefault();}voidCreatePersonCollection(){for(inti=0;i<1;i++){source.Add(newPerson{Name="Adam",SecondName="A"});source.Add(newPerson{Name="Bob",SecondName="A"});source.Add(newPerson{Name="John",SecondName="D"});source.Add(newPerson{Name="Alan",SecondName="E"});source.Add(newPerson{Name="Alex",SecondName="F"});source.Add(newPerson{Name="Jacob",SecondName="R"});source.Add(newPerson{Name="Peter",SecondName="J"});source.Add(newPerson{Name="Clark",SecondName="L"});source.Add(newPerson{Name="Ben",SecondName="A"});source.Add(newPerson{Name="Dave",SecondName="S"});}Persons=newObservableCollection<Person>(source);}#region INotifyPropertyChangedpubliceventPropertyChangedEventHandlerPropertyChanged;voidOnPropertyChanged([CallerMemberName]stringpropertyName=null){PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(propertyName));}#endregion}

Step 6: Finally, set the binding context to thePersonsViewModel, bind theItemsSource with thePersons list and bind theDisplayMemberPath property with theName property.

<ContentPage.BindingContext><local:PersonsViewModel/></ContentPage.BindingContext><inputs:SfAutocompleteWidthRequest="200"ItemsSource="{Binding Persons}"DisplayMemberPath="Name"/>

That’s it. Our .NET MAUI Autocomplete control is now ready.

.NET MAUI Autocomplete Control

Key features in .NET MAUI Autocomplete

Text Search Mode

TheTextSearchMode property of the .NET MAUI Autocomplete control regulates the control’s behavior when it receives user input. The available text filter modes are:

StartsWith
Contains

Placeholder Text

ThePlaceholderText property prompts the user with information that can be searched using the Autocomplete control. This text will be displayed only if no items are selected and the edit text is empty. The default value of thePlaceholderText property isstring.Empty (no string will be displayed).

Refer to the following code example.

<inputs:SfAutocompleteWidthRequest="200"HeightRequest="40"ItemsSource="{Binding Persons}"TextSearchMode="StartsWith"PlaceholderText="Search"DisplayMemberPath="Name"/>

.NET MAUI Autocomplete with Placeholder text

Color customization

Also, you can customize the border color, placeholder text, text color, and clear button icon color as in the following code example.

<inputs:SfAutocompleteWidthRequest="200"HeightRequest="30"ItemsSource="{Binding Persons}"TextSearchMode="StartsWith"PlaceholderText="Search"ClearButtonIconColor="DeepPink"PlaceholderTextColor="HotPink"TextColor="DeepPink"DisplayMemberPath="Name"/>

Upcoming features

This is the initial version of our Syncfusion .NET MAUI Autocomplete control. You can expect the following features in our upcoming releases:

MultiSelection with chip UI
Diacritic sensitivity
Item templates
Text match highlights
Dropdown header and footer
Custom filtering

Conclusion

Thanks for reading! In this blog, we have seen the features of the new.NET MAUI Autocomplete control available in our2022 Volume 3 release. Check out ourRelease Notes andWhat’s New pages to see the other updates. You can download theEssential studio for .NET MAUI to evaluate this control.

You can contact us through oursupport forum,support portal, orfeedback portal. We are always happy to assist you!