Extending AutoCompleteBox

I like the AutoComplete feature for email addresses in hotmail, we get suggestions for any number of email addresses when we start typing. With AutoCompleteBox we get one.
Here is my attempt to implement that feature extending AutoCompleteBox.

I defined a property called ‘ExtText’ instead of overriding the Text property

we will start using the control by declaring like this

<local:ExtAutoCompleteBox Margin=”25″    TextBoxStyle=”{StaticResource textboxStyle}”
                                    x:Name=”eacb”
                                    MinimumPrefixLength=”1″ />

I had to style the TextBox to remove some borders and adjust BorderThickness properties. this style is in Page.xaml and in the codebehind set the ItemsSource Property to an array of string values. once we start typing we get the popup with suggestions like below

 eacb1

After we make a selection, we get the word displayed similar to what hotmail does, you will be able to remove the item by clicking the ‘x’. and the cursor will move to the end.  The button is just to get a message of all the selected words seperated by ‘;’

eacb1

eacb1
eacb1

you can download the code here

Advertisements

23 thoughts on “Extending AutoCompleteBox

  1. Lee, this is pretty awesome!
    Way to go!

    I love what you did there with the “X” markers and the multi-selection in AutoCompleteBox. This looks really great.

    Any chance you’ll have a publicly hosted example? (maybe on Silverlight Streaming?)

    Keep it up,
    — Justin Angel
    Microsoft Silverlight Toolkit program manager

    1. Hi justin,
      Thanks, I wanted to host on Silverlight streaming, forgot how I was creating the zip file to upload. I will try to find the format and post a link

  2. Hi Lee!

    I’ve been using your great extension for SL 2 with great success.

    Our project has now migrated to SL 3 and I’ve run into some trouble.

    When calling base.OnApplyTemplate(); (ExtAutoCompleteBox.cs, 92) I get a runtime error saying “InvalidOperationException Element is already the child of another element.”

    Commenting it out gives me no errors but a non functional textbox.

    Any help would be much appreciated!

    /Mats

  3. Hi Lee,
    Thanks for nice and neat implementation.

    I’m facing one problem with nummber of items I can add/select , existing control does only allow to select items of initial length of textbox (for example say width=100 ) .Is it possible add scroll view and add more items (Just like textbox when we type characters to the textbox it automatcially scrolls the view for you).I would appreciate if you share some samples with this implementation.

    Thanks,
    BAIJUMAX

  4. Hi Lee,
    I am using this control it is working fine for me ,but in one scenario this is not supporting my requirement ,Problem is if you add more than 5 users then the added users are hiding,so can you please help me in this case .

    Thanks & regards
    Ashwij

    1. The width of the textbox might not be big enough. I dont think it will scale to support more than a few items.

      1. Hi Lee,
        so what is the solution for this problem,because my clients are asking they want to add multiple items .

        Thanks & regards
        Ashwij.

        1. Make the TextBox bigger, enable scrolling , if that doesnt work. this control might not work for your requirement.

  5. Hi lee,
    I used your code and compile in SL4. No error but the text box didn’t show up. Only showing a button. Can you please help me? thank you 🙂

  6. Hi Lee,
    Sorry for spamming. I fixed the problem by adding the themes folder into the project.

    Another question I would like to ask, how can I add a drop down arrow at right end (to display like a dropdown menu)? Once I click the arrow, it will list down all the options available..

    Thanks for your help..

  7. Run time Error – “Element is already the child of another element.”
    is coming in line base.OnApplyTemplate(); — file ExtAutoCompleteBox.cs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s