Type-Ahead Text Searching in Silverlight 5 Beta



Prologue:

In this article we shall discuss one of the new features of Silverlight 5 Beta. Type-Ahead text searching for items controls is one of the features that business users simply expect as a given.

Short intro about Type-Ahead Text Searching:

If we have a list of items, we want to be able to select one by simply typing the first few letters on the keyboard. Unfortunately, this feature has been missing in Silverlight 4 and earlier versions.

Let us demonstrate the Type-Ahead Text Searching feature.

Preparing the Solution:

Fire up VS 2010; create a new Silverlight 5 project with the name "TypeAheadListBoxInSL5Beta" as shown in the figure.

TeSeSilver1.gif

Just ensure we selected the Silverlight 5 version.

TeSeSilver2.gif

Designing the Screen [XAML]:

Designing the screen is pretty simple. Just place a list box in the screen and name it "lstBoxNames".

TeSeSilver3.gif

The above figure shows the complete code for the screen with a ListBox.

The Code-Behind:

Here is the code for binding the name collections to the list box lstBoxNames.

TeSeSilver4.gif

That's it! ... Done…

Application in Action:

TeSeSilver5.gif

The result of this is that you can select items in the list box by typing the first letters of the strings. For example, if you first type an "s", the entry "Shanmugavel" is selected. If you add an "a" quickly after that, "Sakthivedivel" is selected. If you pause typing for approximately one second, the mechanism is reset and starts over from the beginning. Example: Type in "Sha", then wait a second or longer before you add the "n". "Naagu" will be selected. This output screen is not enough to demonstrate the type-ahead text searching feature of Silverlight 5.

Just think on this…

Here the given demonstration is for – only a single property collection.

Consider the list box has a template with 3 properties. For this situation what should we do? Which property will the search be based on?

Explicitly specifying the search criteria:

For the above mentioned situation we have to explicitly specify the search criteria. To explicitly specify the search criteria we can do like:

TeSeSilver6.gif

If the item in the collection uses the Template and the template has more than one property which means we have explicitly specifired the search criteria as like the above one.

TeSeSilver7.gif

The above picture shows the output for the implicit specification of the search criteria and the explicit specification of the search criteria.

Here is the video for the both outputs.

TeSeSilver8.gif

Summary:

In this article, we have seen the new feature called Type-Ahead text searching in Silverlight 5 Beta.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.

Thanks.