Kiwi Ingenuity

My objective is to design an WPF auto complete text box that I can use to make calls to a web service. I was aware of the Reactive Extensions technology, but have never up to now had an opportunity to deploy an RX solution

Reactive Extensions

Reactive Extensions appealed to me because the amount of code required to set up an observe / search routine is minimal. The syntax is very powerful.  

As an introduction to RX I worked through the example published by PeteGoo called Building an Auto Complete control with Reactive Extensions (Rx). When I had completed the exercise I had a code snippet that showed me how to create a synchronous (or asynchronous) call to a web service, which catered for:

· Throttling (idle periods before searching)

· Merging multiple event streams

· Removing duplicate consecutive events

· Cancelling previous searches

All the above attributes were important features for my auto complete text box.

I highly recommend that before you proceed any further that you read and understand Pete Goo’s example.

Popup Control

What was missing from Pete Goo’s example was a Popup that would display each time text was entered into the textbox. I also wanted to have a reusable user control which would contain the repetitive code base.

The solution that appealed was the creation of Ioan Lazarciuc called Auto Complete for Textboxes in WPF. Ioan was inspired by the AutoCompleteExtender in the ASP.NET Ajax control toolkit and also because his solution requires minimum intervention of existing WPF code.

What Ioan’s solution lacked was the ability to do an asynchronous search while the operator keyed the search phrase. PeteGoo’s solution has taken care of this for us, so we have all the code snippets required to build an autocomplete textbox. All we have to do now is put it all together.

The attached solution is my suggestion how to implement an auto complete textbox in WPF that allows asynchronous search capabilities to a web service. I will not be going over what my two contributors have already scripted, so you may want to study their solutions first before proceeding.

TextBoxAutoCompleteExtender

My extender is a WPF user control that handles all the background tasks when the operator keys a search into the selected textbox.

To call my extender is very simple.

<StackPanel.Resources>
   <!--Set up a ObjectDataProvider which contains the data we 
   intend to lookup-->
   <ObjectDataProvider ObjectType="{x:Type local:MyDataProvider}"
                       MethodName="DoSearch"
                       x:Key="doSearch" >
            <ObjectDataProvider.MethodParameters>
                <x:Static Member="system:String.Empty" />
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </StackPanel.Resources>
    <Label Content="Type in Search Phrase:" />
    <TextBox x:Name="textBox" />
    <ac:TextBoxAutoCompleteExtender x:Name="autoTxtBox"
                                    TargetControl="{Binding ElementName=textBox}"
                                    SearchDataProvider="{Binding Source={StaticResource doSearch}, 
				                                    BindsDirectlyToSource=True}" />
</StackPanel>

And that it!

Execute the application and the popup will display suggestions as you are typing characters into you TextBox.  You can use your keyboard or the mouse to select the correct phrase.

You can download my source code and example here.