Introducing the .NET MAUI Autocomplete Control | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing .NET MAUI Autocomplete Control

Introducing the .NET MAUI Autocomplete Control

An Autocomplete control was one of the most-requested controls by our mobile app developers. We at Syncfusion understand the requirement for this essential control and have now delivered the .NET MAUI Autocomplete control in our 2022 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 the NuGet Gallery. To add the SfAutoComplete to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Inputs, and then install the NuGet package.

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

using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.ListView.Hosting;

public static class MauiProgram
{
 public static MauiApp CreateMauiApp()
 {
  var builder = MauiApp.CreateBuilder();
  builder
  .UseMauiApp<App>()
  .ConfigureSyncfusionCore()
  .ConfigureSyncfusionListView()
  .ConfigureFonts(fonts =>
  {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
  });
  return builder.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:SfAutocomplete x:Name="autocomplete" WidthRequest="200"/>

Step 5: Now, create the required data to populate the suggestions list. This includes creation of the example Person class, and PersonsViewModel with the list of Person objects.

public class Person
{
 public string Name { get; set; }
 public string SecondName { get; set; }
}
public class PersonsViewModel : INotifyPropertyChanged
{
 readonly IList<Person> source;
 Person selectedPerson;
 private string selectedItem;
 public ObservableCollection<Person> Persons { get; private set; }
 public List<string> Items { get; private set; }
 public Person SelectedPerson
 {
  get
  {
    return selectedPerson;
  }
  set
  {
    if (selectedPerson != value)
    {
      selectedPerson = value;
      OnPropertyChanged("SelectedPerson");
    }
  }
}
public string SelectedItem
{
 get
 {
  return selectedItem;
 }
 set
 {
  if (selectedItem != value)
  {
   selectedItem = value;
   OnPropertyChanged("SelectedItem");
  }
 }
}
public PersonsViewModel()
{
  source = new List<Person>();
  CreatePersonCollection();
  
  SelectedPerson = Persons.Skip(3).FirstOrDefault();
}
void CreatePersonCollection()
{
  for (int i = 0; i < 1; i++)
  {
   source.Add(new Person { Name = "Adam", SecondName = "A" });
   source.Add(new Person { Name = "Bob", SecondName = "A" });
   source.Add(new Person { Name = "John", SecondName = "D" });
   source.Add(new Person { Name = "Alan", SecondName = "E" });
   source.Add(new Person { Name = "Alex", SecondName = "F" });
   source.Add(new Person { Name = "Jacob", SecondName = "R" });
   source.Add(new Person { Name = "Peter", SecondName = "J" });
   source.Add(new Person { Name = "Clark", SecondName = "L" });
   source.Add(new Person { Name = "Ben", SecondName = "A" });
   source.Add(new Person { Name = "Dave", SecondName = "S" });
  }
  Persons = new ObservableCollection<Person>(source);
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
  PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}

Step 6: Finally, set the binding context to the PersonsViewModel, bind the ItemsSource with the Persons list and bind the DisplayMemberPath property with the Name property.

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

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

NET MAUI Autocomplete
NET MAUI Autocomplete Control

Key features in .NET MAUI Autocomplete

Text Search Mode

The TextSearchMode 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

The PlaceholderText 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 the PlaceholderText property is string.Empty (no string will be displayed).

Refer to the following code example.

<inputs:SfAutocomplete WidthRequest="200" 
                       HeightRequest="40"
                       ItemsSource="{Binding Persons}"
                       TextSearchMode="StartsWith"
                       PlaceholderText="Search"
                       DisplayMemberPath="Name"/>
.NET MAUI Autocomplete with Placeholder text
.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:SfAutocomplete WidthRequest="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 our 2022 Volume 3 release. Check out our Release Notes and What’s New pages to see the other updates. You can download the Essential studio for .NET MAUI to evaluate this control.

You can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Comments (1)

Do we have a textchanged event planned for the autocomplete? This is great for a static list. However, I need to dynamically populate the observable collection. Example: Google address lookup.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed