Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (61)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (99)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (113)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (248)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (207)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (5)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (23)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (54)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (190)What's new  (120)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
6 Incredible Features of WPF AutoComplete TextBox

6 Incredible Features of WPF AutoComplete Text Box

Our Syncfusion WPF AutoComplete text box control is a complete MVVM-structured (model-view-viewmodel) control. It provides autocomplete functionality with features like data binding, different search modes, drop-down customization, and themes. This control is the best choice if you need autocomplete functionality in the WPF ComboBox. It can also be used as a multiselect combo box by enabling the multiselect mode in it.

In this blog post, I will give you a quick walk-through of our Syncfusion WPF AutoComplete text box control and its top six features:

WPF AutoComplete text box
WPF AutoComplete text box

Different filtering modes

The WPF AutoComplete control comes with a predefined set of filtering modes that filter suggestions based on the characters typed in the text box. The preferred mode is StartsWith, which filters the suggestions when the beginning of the string has matches in the list.

The Contains mode lists all the suggestion words that contain the character typed in the text box, similar to the Google search engine.

Refer to the following code example.

<syncfusion:SfTextBoxExt AutoCompleteSource="{Binding Countries}"
                         AutoCompleteMode="Suggest"
                         SuggestionMode="Contains"/>

Refer to the following screenshot.

Contains filtering option in WPF AutoComplete
Contains filtering option in WPF AutoComplete

Multiple selection

This feature allows you to select multiple items, similar to the email search bar available in the Outlook application. Users can select multiple items either by  token representation or by simply dividing them with a delimiter. To do so, we have to set the MultiSelectMode property to Token or Delimiter.

Customizable token representation allows users to remove an item with a close button. With this, users can divide the selected items with characters they choose, such as dollar representation ($), or by using the traditional comma.

Refer to the following code example.

<Syncfusion:SfTextBoxExt AutoCompleteSource="{Binding Countries}"
                         AutoCompleteMode="Suggest"
                         MultiSelectMode="Token"/>

Refer to the following GIF image.

Multiselection mode in WPF AutoComplete
Multiselection mode in WPF AutoComplete

Text highlighting

This feature highlights the matching text in each suggested item. This helps users detect how the items are filtered (in which filtering mode) and pick items with more clarity. It also makes the search easy with this UI.

Using TextHighlightMode, users can choose whether to highlight a single instance or multiple occurrences of the character typed.

Refer to the following code example.

<Syncfusion:SfTextBoxExt AutoCompleteSource="{Binding Countries}"
                         AutoCompleteMode="Suggest"
                         SuggestionMode="Contains"
                         TextHighlightMode="MultipleOccurrence"
                         HighlightedTextColor="Red"/>

Refer to the following screenshot.

Text highlighted in WPF AutoComplete suggestions list
Text highlighted in WPF AutoComplete suggestions list

This feature allows users to perform a multipath search, or a custom search based on search criteria other than the predefined filtering modes. This can be done by setting the SuggetionMode property to Custom. Users can also define a custom filter and assign it to the Filter property.

Refer to the following code example.

{
     this.textboxext.SuggestionMode = SuggestionMode.Custom;
     this.textboxext.Filter = Filtering;
}

public bool Filtering(string search, object item)
    {
        var model = item as Model;
        if (model != null)
        {
            if ((model.Name.ToLower().Contains(search.ToLower())) || ((model.ID).ToString().ToLower().Contains(search.ToLower())))
            {
                return true;
            }
        }
        return false;
    }

Refer to the following screenshot.

Multipath search in WPF AutoComplete
Multipath search in WPF AutoComplete

Diacritic sense

The AutoComplete control comes with a special feature for supporting languages with letters containing diacritic marks and searching for them with English characters from the keyboard. This feature helps populate items for your search by either considering or ignoring the diacritic.

Refer to the following code example.

<Syncfusion:SfTextBoxExt AutoCompleteSource="{Binding DiacriticCollection}"
                         AutoCompleteMode="Suggest"
                         IgnoreDiacritic="False"
                         SuggestionMode="Contains"/>

Refer to the following screenshot.

Diacritic sensitivity in AutoComplete
Diacritic sensitivity in AutoComplete

Customizing WPF AutoComplete control as a ComboBox

The WPF AutoComplete control can also be used as a ComboBox with autocomplete functionality by enabling the drop-down button. This can be done by setting the ShowDropDown  property to true.

Refer to the following code example.

<Syncfusion:SfTextBoxExt AutoCompleteSource="{Binding Countries}"
                         AutoCompleteMode="Suggest"
                         ShowDropDown="True"/>

Refer to the following screenshot.

AutoComplete text box as ComboBox
AutoComplete text box as ComboBox

Conclusion

Thanks for reading! In this blog, we have covered the top six features of our Syncfusion WPF Autocomplete control to improve your application. Refer to our UG documentation to learn about all the available features. You can also try our WPF AutoComplete demos.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

If you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top