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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>