Introducing the New WinUI 3 AutoComplete Control | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)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  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)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  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)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  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New WinUI 3 AutoComplete Control

Introducing the New WinUI 3 AutoComplete Control

We are glad to announce our new WinUI 3 AutoComplete control in the 2021 Volume 4 release. It is a text box control that shows a suggestion list based on user input.

The key features of the AutoComplete control are:

Let’s look at these features and learn how to integrate the new WinUI 3 AutoComplete control into your application.

Multiple selection

The AutoComplete control provides support for both single and multiple selection modes.

In single selection mode, we can select a single item from the suggestion list based on the entered text.

In multiple selection mode, we can choose more than one item from the suggestion list. The selected items are displayed as tokens or chips in the selection area. Each item has a close button to easily remove it.

Multiple Selection Mode in WinUI AutoComplete
Multiple Selection Mode in WinUI AutoComplete

Note: For more details, refer to the multiple selection mode in WinUI AutoComplete documentation.

Filtering

The built-in filtering feature filters items based on the user input in the text box. It filters the items by matching the input text with the starting text or any specific text in the items.

Refer to the following GIF images.

Filtering with Starting Text in WinUI AutoComplete
Filtering with Starting Text in WinUI AutoComplete
Filtering with Contained Text in WinUI AutoComplete
Filtering with Contained Text in WinUI AutoComplete

Note: For more details, refer to the filtering modes in WinUI AutoComplete documentation.

Custom filtering

Besides the built-in filtering support, users can use their own filtering logic to show suggestions. These suggestions can be loaded instantly from a huge volume of data.

Refer to the following image. Here, the AutoComplete filters cities based on the country name.

Custom Filtering in WinUI AutoComplete
Custom Filtering in WinUI AutoComplete

Note: For more details, refer to the custom filtering in WinUI AutoComplete documentation.

Grouping

You can display the suggestions by grouping them using the CollectionViewSource property. Each group will have a header. Also, we can customize the group headers with images and templates.

Refer to the following image.

WinUI AutoComplete Displaying Grouped Items
WinUI AutoComplete Displaying Grouped Items

Note: For more details, refer to the grouping in WinUI AutoComplete documentation.

Asynchronous item loading

This feature dynamically loads a huge volume of data at runtime based on user input.

Refer to the following image where 100,00 items have been loaded based on the user input.

Asynchronous Loading in WinUI AutoComplete
Asynchronous Loading in WinUI AutoComplete

Note: For more details, refer to the asynchronous loading in WinUI AutoComplete documentation.

Item customization

Customize the suggestion list items to create an impressive UI with an image or any custom control. This helps users to easily choose the items they need from the list.

Dropdown Items Customization in WinUI AutoComplete
Dropdown Items Customization in WinUI AutoComplete

Note: For more details, refer to the WinUI AutoComplete dropdown item customization.

Themes

You can enjoy both light and dark themes in AutoComplete control.

Themes in WinUI AutoComplete
Themes in WinUI AutoComplete

Note: Refer to the themes for Syncfusion WinUI Controls documentation.

Getting started with the WinUI AutoComplete

We have explored the features of the WinUI AutoComplete control, so now let’s see how to add it to your app and use its basic features.

Step 1: Create a WinUI application.

First, create a simple project using the instructions provided in the Create a WinUI 3 app with Windows App SDK documentation.

Step 2: Add the Syncfusion.Editor.WinUI NuGet package.

Install the latest Syncfusion.Editor.WinUI NuGet package in your app from nuget.org or from the installed location, C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages.

Note: In the installed location, xx.x.x.xx denotes the version of the Syncfusion WinUI Editor package.

Refer to the following image.

Install the Syncfusion.Editor.WinUI NuGet package

Step 3: Add the namespace.

Include the editors namespace in your XAML file with the following code.

xmlns:editors="using:Syncfusion.UI.Xaml.Editors"

Step 4: Initialize the AutoComplete control.

Finally, initialize the AutoComplete control. Refer to the following code example.

<editors:SfAutoComplete  TextMemberPath="Name"
                         DisplayMemberPath="Name"
                         ItemsSource="{Binding Employees}" />

Here, the DisplayMemberPath property is used to specify the name or path of the property displayed for each data item in the dropdown list. The TextMemberPath property gets the value to display in the selection box portion when an item is selected.

WinUI AutoComplete Displaying Items
WinUI AutoComplete Displaying Items

Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion WinUI 3 AutoComplete control and its features. This control is available in our 2021 Volume 4 release. Check out our Release Notes and What’s New pages to see all the new updates in this release. Try them out and leave your feedback in the comments section below!

Also, you can check our WinUI control demos on GitHub and in the Microsoft Store.

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

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

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top