Silverlight 3 has the AutoCompleteBox control which is a textbox that shows suggestions in a drop-down, when the user types text into it. Here’s a very simple example of this control in action.
Just drop in a TextBlock and the Silverlight3 AutoCompleteBox control inside a Canvas as shown below:
<Canvas x:Name="LayoutRoot" Height="300" Width="300"
HorizontalAlignment="Left">
<TextBlock Text="Enter Country starting with 'A'"
Canvas.Top="5" Canvas.Left="10"/>
<input:AutoCompleteBox x:Name="locAuto" Width="200"
Canvas.Top="25" Canvas.Left="10">
</input:AutoCompleteBox>
</Canvas>
Type the following code in the code behind file
public MainPage()
{
InitializeComponent();
// Assuming this list comes from a service
List<string> cList = new List<string>();
cList.Add("Afghanistan");
cList.Add("Albania");
cList.Add("Algeria");
cList.Add("American Samoa");
cList.Add("Andorra");
cList.Add("Angola");
cList.Add("Aruba");
locAuto.ItemsSource = cList;
}
Now run the application and on typing ‘A’, a list of suggestions appear in a drop-down fashion. Observe that there are 7 suggestions given to the user.
We will now apply a custom filter to this AutoCompleteBox and filter out those countries whose length is not greater than 5. To do so, create a method that accepts two parameters: the user text and the text that has to be matched
public bool AutoFilter(string text, string item)
{
return (item.Length > 5);
}
The final step is to set the ItemFilter property of the AutoCompleteBox to a delegate that points to our Filter method
locAuto.TextFilter = AutoFilter;
Run the application again and you will find that ‘Aruba’ is not shown as a suggestion since it’s length is not greater than 5
