AutoComplete for Silverlight TextBoxes

Here's the corresponding server-side code implementing the service in Cities.ashx:

public class CityCompletionService : CompletionService<string> {

    protected override IEnumerable<string> GetItems(string prefix) {
        string[] matchingCities = ...;
        return matchingCities;
    }
}

Scenario 2: Styling the user interface
One of the most compelling aspects of XAML and Silverlight is the ability to create compelling user interfaces by restyling and reskinning controls to match the overall look and feel of your application. The AutoComplete behavior supports this by allowing you to specify a template for the dropdown used by the behavior. If I've got some customized look and feel defined in the myCustomListBox style, I can reference it as follows:

<TextBox x:Name="cityTextBox">
  <f:Form.AutoComplete>
    <f:AutoComplete ServiceUri="/App_Services/Cities.ashx">
      <f:AutoComplete.DropDownTemplate>
        <DataTemplate>
          <ListBox Style="{StaticResource myCustomListBox}" />
        </DataTemplate>
      </f:AutoComplete.DropDownTemplate>
    </f:AutoComplete>
  </f:Form.AutoComplete>
</TextBox>

Scenario 3: Going beyond strings
So far the service backing the completion experience has been returning an array of strings. I actually want to use a service that returns something more than just a string (you'll see why in the next step). For example, in this scenario, I want to return an array of CityInfo objects that contain Name, State and ZipCode properties.

Here is the updated service implementation on the server.

public class CityInfo {
    public string Name { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
}

public class CityCompletionService : CompletionService<CityInfo> {

    protected override IEnumerable<CityInfo> GetItems(string prefix) {
        CityInfo[] matchingCities = ...;
        return matchingCities;
    }
}

In order to implement this scenario on the client I need to do a couple of things. First I need to provide a client-side type that the AutoComplete behavior uses to deserialize the JSON into. Next I'll want to customize the ItemTemplate of the ListBox to display the additional fields. Finally, I'll want to handle the Completed event to convert a CityInfo object into text that is used to put into the TextBox once a user selects a particular city.

public class CityInfo {
    public string Name { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Location {
        get {
            return " (" + State + ", " + ZipCode + ")";
        }
    }
}

<TextBox x:Name="cityTextBox">
  <f:Form.AutoComplete>
    <f:AutoComplete
      ServiceUri="/App_Services/Cities.ashx"
      ServiceResultType="CityInfo"
      Completed="OnCityCompleted">
      <f:AutoComplete.DropDownTemplate>
        <DataTemplate>
          <ListBox>
            <ListBox.ItemTemplate>
              <DataTemplate>
                <StackPanel>
                  <TextBlock Text="{Binding Name}" />
                  <TextBlock Text="{Binding Location}" />
                </StackPanel>
              </DataTemplate>
            </ListBox.ItemTemplate>
          </ListBox>
        </DataTemplate>
      </f:AutoComplete.DropDownTemplate>
    </f:AutoComplete>
  </f:Form.AutoComplete>
</TextBox>

private void OnCityCompleted(object sender, AutoCompleteCompletedEventArgs e) {
    // This event handler is optional. By default e.SelectedItem.ToString()
    // is used by the AutoComplete.
    e.SelectedItem = ((CityInfo)e.SelectedItem).Name;
}

Scenario 4: Filling dependent TextBoxes
There was a reason to return CityInfo objects instead of simply city names. Lets say my form also has a TextBox for entering ZipCode. If the user selects a city from the auto-complete dropdown, I'd also like to fill the zip code for added convenience.

I can simply update my Completed event handler above to extract the ZipCode and populate the ZipCode TextBox accordingly.

private void OnCityCompleted(object sender, AutoCompleteCompletedEventArgs e) {
    zipCodeTextBox.Text = ((CityInfo)e.SelectedItem).ZipCode;
    e.SelectedItem = ((CityInfo)e.SelectedItem).Name;
}

Scenario 5: Using local computed values
So far I've been showing scenarios where the AutoComplete behavior makes a web request to get at the list of the completion items to show in its dropdown. Some times, an app might want to show a list of values computed in client-side logic. Or you may have already loaded data from a web service call, and just want to plug in that data, rather than making a separate call.

This scenario is implementable by handling the Completing event of the AutoComplete behavior which allows you to either plug in your items, or to suppress the dropdown altogether for the particular prefix text that the user has entered. For example:

<TextBox x:Name="cityTextBox">
  <f:Form.AutoComplete>
    <f:AutoComplete Completing="OnCityCompleting" />
  </f:Form.AutoComplete>
</TextBox>

private void OnCityCompleting(object sender, AutoCompleteCompletingEventArgs e) {
    string prefix = e.Prefix;

    string[] cities = ...; // code to lookup some local data using prefix
    e.SetCompletionItems(cities);
}

Live Demo
Finally, here is a demo of the AutoComplete behavior. To experiment, type in something "San" in the city TextBox to see a list of cities pop up. Select a city (such as San Francisco) to see both the city and the zip code TextBoxes get filled.

Yet another behavior... TextFilter
Actually, I've slipped in another behavior as well into the mix, just for some more fun. This is the TextFilter behavior that can also be associated with a TextBox to restrict input to say numeric characters.

<TextBox x:Name="zipCodeTextBox">
  <f:Form.Filter>
    <f:TextFilter Filter="Numbers" />
  </f:Form.Filter>
</TextBox>

Hopefully these examples really start making the behavior concept more concrete, and clear.

You can download the code, which includes the behavior framework, all the behaviors I've written about so far, as well as a sample app that demonstrates using them. Enjoy!