5,693,936 members and growing! (16,422 online)
Email Password   helpLost your password?
Platforms, Frameworks & Libraries » Windows Presentation Foundation » Controls     Beginner License: The Code Project Open License (CPOL)

WPF Autocomplete Textbox Control

By thomastn

An article showing how to build a WPF autocomplete textbox control with delay input
C# 3.0, C#, Windows, .NET, .NET 3.5, .NET 3.0, WPF, Dev

Posted: 31 May 2008
Updated: 31 May 2008
Views: 11,219
Bookmarked: 19 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
10 votes for this Article.
Popularity: 3.52 Rating: 3.52 out of 5
0 votes, 0.0%
1
2 votes, 20.0%
2
2 votes, 20.0%
3
1 vote, 10.0%
4
5 votes, 50.0%
5

Introduction

This article demonstrates some basic steps on how to build an auto complete textbox custom control with WPF. I have looked at many auto completion textbox solutions, most of them suffered performance issues when filled with large amount of entries. This implementation attempts to mask that problem by not building the suggested list until the user is done typing.

Background

I needed an autocompletion textbox for my application that can search based not just on name but also on keywords. I found the solution posted by pfemiani. I like his idea of searching by keywords but the solution does not work for my WPF application without extensive modification. Then I came across a WPF solution from AskErnest.com using a textbox and combobox controls, so I decided to build my code upon that.

Ernest's suggestion is pretty simple, there are two children in the control, Textbox and Combobox. On the TextBox's TextChanged event, we would populate the list for the combobox using words matching the text in the textbox. On the ComboBox's SelectionChanged event, we set the text in the textbox using the content of the selected item of the Combobox. This works very well except that Ernest is only doing name matching and his blog doesn't provide the complete source code.

Another challenge that I'm facing is performance issue. My autocompletion textbox is backed by several thousand entries from a database, on some keyword I could have over 300 hits. Populating the combobox on every user keystroke feels sluggish. My solution is to start a timer on TextChanged event and populate the combobox list only when the timer expires. I tried this on my large database and it works beautifully. I can type a long name and not feel like I'm on a 286.

Using the Code

To use this custom control in your application, you simply add the following files...

  1. AutoCompleteEntry.cs
  2. AutoCompleteTextBox.xaml
  3. AutoCompleteTextBox.xaml.cs

... to your project. Next, in the XAML file that you would like to use the auto complete textbox custom control, add this line to the header block.

xmlns:local="clr-namespace:WPFAutoCompleteTextbox"

Then in the XAML code, where you want to place the auto complete textbox, add:

<local:AutoCompleteTextBox Height="23" Width="240" x:Name="textBox1" 
    DelayTime="500" Threshold="2"/>

In my example code, the name of the textbox is textBox1. You can get or set the text in the textbox by referring to textBox1.Text. The DelayTime property is the amount of time (in ms) that you want to delay after the user starts typing before populating the list. Leaving the DelayTime unset will default to 0, which is populating immediately after each user keystroke. The Threshold property controls the number of characters threshold, at or over that at we will start suggesting.

In the code behind of my example, I manually populate the search entries with a variety of cars and models.

textBox1.AddItem(new AutoCompleteEntry
    ("Toyota Camry", "Toyota Camry", "camry", "car", "sedan"));
textBox1.AddItem(new AutoCompleteEntry
    ("Toyota Corolla", "Toyota Corolla", "corolla", "car", "compact"));
textBox1.AddItem(new AutoCompleteEntry
    ("Toyota Tundra", "Toyota Tundra", "tundra", "truck"));
// null matching string will default with just the name
textBox1.AddItem(new AutoCompleteEntry("Chevy Impala", null));
textBox1.AddItem(new AutoCompleteEntry
    ("Chevy Tahoe", "Chevy Tahoe", "tahoe", "truck", "SUV"));
textBox1.AddItem(new AutoCompleteEntry
    ("Chevrolet Malibu", "Chevrolet Malibu", "malibu", "car", "sedan"));

If for example, the user types in "car", all the entries with the "car" keyword will be suggested.

I hope you find this solution helpful. If you find any errors or have questions, feel free to contact me.

History

  • 30th May, 2008: First release

License

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

About the Author

thomastn



Location: United States United States

Other popular Windows Presentation Foundation articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh)FirstPrevNext
GeneralAnother alternativemembertoidy8:15 30 Sep '08  
Generalkeyboard oriented selectionmemberjohn c gibbons6:24 22 Sep '08  
GeneralNo keyboard navigation?memberarmentage5:59 17 Jul '08  
GeneralComboBox SelectionmemberAndrewiski16:54 2 Jun '08  
GeneralRe: ComboBox Selectionmemberthomastn19:18 2 Jun '08  
GeneralRe: ComboBox SelectionmemberAndrewiski11:24 5 Jun '08  
QuestionChanging data set?memberJim Weiler11:32 31 May '08  
AnswerRe: Changing data set? [modified]memberthomastn18:53 2 Jun '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 31 May 2008
Editor: Deeksha Shenoy
Copyright 2008 by thomastn
Everything else Copyright © CodeProject, 1999-2008
Web13 | Advertise on the Code Project