Friday, July 29, 2011

Filtering TextBox

Hi All,

Today I want to present a nice control that I wrote called the Filtering TextBox (FTB for short). Consider the following case: You have a known (static) list of items, each item represents some sort of operation (the basic operation can be selecting this item but it is not mandatory) and you want to allow the user to see the entire list of items but also filter the shown items based on a text input from the user (similar to city selection in any maps site). Some extra features that my control allows:

  1. Categorizing items - Each item is assigned to a category and these categories are displayed in the list box (above the items).
  2. Disabling items - Each item may be disabled. It appears in the filtered list but the user cannot select it.
  3. Invisible items - Each item may be invisible to the user even if it corresponds to the input text.
  4. Hint Text - Each item may contain a hint text which will be displayed in a slightly grayed out text next to the item display text.
  5. Any class items - An item can be any class as long as it implements a predefined interface.

An example of how the Filtering TextBox works.

I will not show all the implementation details but describe a few interesting points.

There are two type of items in the list. A category and a selectable item. The user distributes items per categories by providing a property getter for the Category property. The control maps all items into the given categories automatically.

Each item added to the FTB must implement the IFilteringTextBoxItem interface and all items must be added in a single call to the Add method. All subsequent calls will simply remove all the previous items.

The SearchTextBox custom control is a simple TextBox with a background text added to it. I got the idea for the implementation from Kevin and his Bag of tricks. At first I thought I would use his control directly but I didn't like his implementation so I implemented my own.

The filter uses two search methods -
  1. Simple string "contains" (CIAI) for each word in the input TextBox.
  2. Something like CamelCase notation for words  (I saw this method was popular so I added it) i.e. you can type the first letters in the string you search.
You can download the full source code from my SkyDrive here. The code is as usual under the COPL (The Code Project Open License 1.02).

Feel free to leave comments.