Making a reverse Autocomplete-TextBox on Windows Phone

I’m sure you’re familiar with autocomplete textboxes and maybe you’ve even used them in a project yourself. They provide a fast and easy way for the user to select something, but they lack one important feature: they don’t show what could be selected.

ReverseAutocompletePopup is a mixture between an autocomplete text box and the kind of popup you get when a ComboBox has more than five items. At first it displays all options in a ListBox and as you type non-matching ones are filtered out. (And brought back when you delete the text!) EDIT: In the newer version, the user can hit Enter to select, or optionally use his input as the result.

revAutocompl

When working with it there’re a few things you need to have in mind:

The Popup control is no real navigation-thing, so you are in charge to handle OnBackKeyPress according to the guidelines! The Options for the controls are provided inside an ObservableCollection<Option> where Option is a simple class with two properties (string: Title, object Object). As I provide you with the sources, you can change this of course, but then you need to adjust the binding of the ListBox.ItemTemplate as well.

You can refer to the sample for more information on how to implement it.

Have fun^

EDIT: I’ve modified the control in the current version (available on NuGet). The ReverseAutocompletePopup exposes a method you can attach to the BackKeyPress event to put the control in charge of handling BackKeyPress. ReverseAutocompletePopup.ShowAsync(…) is used to show the control.

TCD.Controls on NuGet

Download TCD.Controls sample

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s