Click here to Skip to main content
15,942,760 members
Articles / Desktop Programming / WPF
Tip/Trick

WPF AutoComplete TextBox

Rate me:
Please Sign up or sign in to vote.
4.96/5 (16 votes)
28 Jul 2014CPOL2 min read 84.8K   4.6K   14   27
An advanced and fully featured WPF AutoComplete TextBox control

WPF Auto Complete TextBox Control

Introduction

In this tip, I'll try to explain how to use my AutoCompleteTextBox for WPF. The AutoCompleteTextBox is similar to TextBox with auto complete behavior. You can provide user suggestions while he/she is typing in the text box. AutoCompleteTextBox works asynchronously to find and display suggestions, so user doesn't have to wait for suggestions on every key-stroke.

Background

I really missed the auto complete feature of WinForm's TextBox in WPF. I decided to create my own TextBox control with auto complete behavior. My objective was not to keep it just limited to the filtering from a list of strings. I have tried to keep the control as simple as possible, yet fully featured and it completely supports MVVM design pattern. You can download the latest source code from https://wpfautocomplete.codeplex.com/.

Features

  • Load suggestions on-demand
  • Supports MVVM
  • Asynchronously load suggestions
  • Watermark
  • Icon
  • DataTemplate for suggestions
  • DataTemplateSelector for suggestions

How Does It Work?

UI of AutoCompleteTextBox is mainly divided in three parts, PART_Editor, PART_Popup and PART_Selector.

C#
[TemplatePart(Name = AutoCompleteTextBox.PartEditor, Type = typeof(TextBox))]
[TemplatePart(Name = AutoCompleteTextBox.PartPopup, Type = typeof(Popup))]
[TemplatePart(Name = AutoCompleteTextBox.PartSelector, Type = typeof(Selector))]
public class AutoCompleteTextBox : Control
{
    public const string PartEditor = "PART_Editor";
    public const string PartPopup = "PART_Popup";
    public const string PartSelector = "PART_Selector";
    ...
    ...
}
Part Type Use
PART_Editor TextBox Editing area where user can type any text to search
PART_Popup Popup A dropdown that contains the suggestions
PART_Selector Selector Display each item in the suggestions

AutoCompleteTextBox uses ISuggestionProvider to get a list of suggestions to display. When user types in any text in the textbox, it calls the ISuggestionProvider.GetSuggestions method, which is supposed to return an IEnumerable type. You can define a delay period by Delay property, for which AutoCompleteTextBox must wait for another key-stroke before making a call to ISuggestionProvider.GetSuggestions method.

C#
public interface ISuggestionProvider
{
    IEnumerable GetSuggestions(string filter);
}

Using the Control

To add the AutoCompleteTextBox in your view, you need to import http://wpfcontrols.com/ namespace in the XAML.

XML
xmlns:wpf="http://wpfcontrols.com/"

<wpf:AutoCompleteTextBox  />

As I mentioned earlier that AutoCompleteTextBox uses ISuggestionProvider to get a list of suggestions, we need to create a provider which will return our suggestions. The below code example shows how to create a suggestion provider.

C#
var provider = new SuggestionProvider(x =>
{
    IEnumerable suggestions;
    ...
    ...
    return suggestions;
}); 

History

Please visit CodePlex for version history and for downloading the latest version of the AutoCompleteTextBox.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Interglobe Technologies
India India
Hello, I am Deepak Bhardwaj. I am working as Module Lead at Interglobe Technologies (IGT) in Microsoft .NET Technologies. I have worked on Winforms and WPF.

Comments and Discussions

 
PraiseMy vote of 5 Pin
Bohdan Stupak18-Apr-22 4:01
professionalBohdan Stupak18-Apr-22 4:01 
QuestionHow to pass parameters to SuggestionProvider ? Pin
Member 1127554215-Sep-19 23:03
Member 1127554215-Sep-19 23:03 
AnswerRe: How to pass parameters to SuggestionProvider ? Pin
Member 1127554219-Sep-19 0:18
Member 1127554219-Sep-19 0:18 
QuestionSelectionChanged Event? Pin
adrian lewis23-Oct-18 3:57
adrian lewis23-Oct-18 3:57 
AnswerRe: SelectionChanged Event? Pin
Member 140969248-Jan-19 17:49
Member 140969248-Jan-19 17:49 
AnswerRe: SelectionChanged Event? Pin
Braulio Lledó7-Mar-21 15:58
Braulio Lledó7-Mar-21 15:58 
GeneralRe: SelectionChanged Event? Pin
quicoli8-Mar-22 11:04
quicoli8-Mar-22 11:04 
QuestionComboBox-like functionality? Pin
CCB20108-Aug-18 10:48
CCB20108-Aug-18 10:48 
Hi,
Has anyone tried to use this to create a combobox-like control?
Or maybe added an arrow to open the suggestion list to this control?

As nice as this is, our users are expecting a combobox....

Thanks --
AnswerRe: ComboBox-like functionality? Pin
quicoli8-Mar-22 11:03
quicoli8-Mar-22 11:03 
QuestionAuto selected 1st item Pin
ErrrCmon!30-Mar-17 15:18
ErrrCmon!30-Mar-17 15:18 
QuestionOpen Source License Change Pin
wagnerpalm25-Oct-16 12:16
wagnerpalm25-Oct-16 12:16 
QuestionI did some changes and shared it on GitHub Pin
quicoli8-Apr-16 4:40
quicoli8-Apr-16 4:40 
QuestionNot able to add provider in autocompletebox in c#. Pin
Ayushmaan Kapoor2-Mar-16 22:10
Ayushmaan Kapoor2-Mar-16 22:10 
SuggestionGood Control - Support for entered text and not selected Pin
David Rose29-Sep-15 9:56
David Rose29-Sep-15 9:56 
QuestionCan I add the SelectedItem into controls like ListBox? Pin
Shajeeb S21-Sep-15 23:53
Shajeeb S21-Sep-15 23:53 
QuestionIcon in UserControl Pin
Andrzej_kl5-Jul-15 21:10
Andrzej_kl5-Jul-15 21:10 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak7-Jul-15 21:00
Bhardwaj Deepak7-Jul-15 21:00 
GeneralRe: Icon in UserControl Pin
Andrzej_kl8-Jul-15 11:11
Andrzej_kl8-Jul-15 11:11 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak12-Jul-15 21:19
Bhardwaj Deepak12-Jul-15 21:19 
GeneralRe: Icon in UserControl Pin
Andrzej_kl14-Jul-15 18:47
Andrzej_kl14-Jul-15 18:47 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak15-Jul-15 0:06
Bhardwaj Deepak15-Jul-15 0:06 
GeneralRe: Icon in UserControl Pin
Andrzej_kl16-Jul-15 7:51
Andrzej_kl16-Jul-15 7:51 
QuestionCan I limit the item shown? Pin
Roberto Salemi27-Mar-15 5:50
Roberto Salemi27-Mar-15 5:50 
AnswerRe: Can I limit the item shown? Pin
Bhardwaj Deepak31-Mar-15 20:07
Bhardwaj Deepak31-Mar-15 20:07 
SuggestionMinor issues and their solving Pin
Sir_Draven21-Aug-14 4:01
Sir_Draven21-Aug-14 4:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.