Modified Adobe AutoComplete Input Example

Posted on September 28, 2006 | 16 comments

I went ahead and downloaded the newly created AutoComplete Input component from Adobe.com Flex exchange. This component will be one of many to come from the Adobe’s Flex Team.

There are a couple included examples which where very easy to follow. In my example I’ll show how to use the AutoComplete Input component to search and filter the data in a DataGrid. The combination of the AutoComplete Input component and the DataGrid provides a nice little search feel affect. You can see it in action here. Source is included by right clicking on the SWF.

Here is a screenshot of the example:

AutoComplete Input Modified Example

I put the countries into an ArrayCollection instead of just an Array to allow the data providers to listen to changes. Then I bound the ArrayCollection to the AutoComplete Input component as well as the DataGrid’s dataprovider, this means with the AutoComplete filters the data provider the changes automatically show up in the DataGrid. I bound the label fields to the DataGrid if it was selected, nothing much to it.

Share the post "Modified Adobe AutoComplete Input Example"

  • http://jeffhowden.com/ Jeff Howden

    When the autocomplete fires a filter on the datagrid, you should scroll the datagrid back up to the top.

  • Mark

    Hey there,

    Really cool example, but I couldn’t get the source on right click. Love to see it if possible.

  • http://www.renaun.com Renaun Erickson

    Jeff,

    good idea its done.

    Mark,

    Sorry forgot to upload the SWF after publishing source option. Its up now.

  • Guillermo

    Muy Cool!!!

    I have one question in wich way you getr the source of the data, I means in the UN site, and the you select Country by Country (max. 5) and download as CVS. and then convertierung as ARRAY?.

    thanks for your information and for share this with all,

    Guillermo

  • http://www.renaun.com Renaun Erickson

    I actually took these code from the Adobe Flex Team’s AutoComplete Input component, so I do not know the particulars of how they obtained the information.

  • Andrew

    Renaun, this is excellent! Thanks for sharing…

  • Andrisi

    Did you try to use an external source for the autocomplete items? When a php script give back the list according to the typedText property – but not all the possible items at once (as in this example). I don’t see how to implement it. I tried with an event on the typedTextChanged, but the it reopens the dropdown for eeach refresh.

  • Andrisi

    http://kuwamoto.org/2006/05/11/example-code-updated-for-beta-3/ solves this. That autocomplete component has async sugestion update…

  • http://www.renaun.com Renaun Erickson

    Andrisi, thank you for posting

  • Srinivas

    Did you try to use an external source for the autocomplete items? When a php script give back the list according to the typedText property – but not all the possible items at once (as in this example). I don’t see how to implement it.

  • http://www.connectstudios.com Ryan T. Graff

    If you are looking for an auto-complete class that is very much like a normal browser’s auto-complete only for flex, you can find one at our site http://connectstudios.com/?section=7

    It uses the SharedObject and is very dynamic, basing it saved data on the name of the TextInput to which it is applied.

    I wrote it because it comes in very handy for username fields and other TextInputs which are used over and over again.

    Hope this helps!

  • Nick

    Is there any way to have the auto complete get the its information from an outside source? Instead of the countryData.as? For example retrieving some XML? I’m having a hard time understanding how exactly this all works.

  • http://www.renaun.com Renaun Erickson

    Load the external data, then set the dataProvider and label field on the AutoComplete component and it will work.

  • R

    Any ideas on not allowing text that isn’t in the data provider?

  • Jaz

    The example given above doesn’t seem to work for me, Also does this work for flex 3 or not?

  • http://hillelcoren.com/ Hillel Coren

    Here’s yet another take on the AutoComplete component. Check it out and let me know what you think.

    http://hillelcoren.com/2008/11/10/flex-autocomplete-component-a-new-take-on-an-old-standard/

    Best,
    Hillel