3
Apr
2006

Flex auto complete text input control v0.6

[The auto complete text input control has been updated for the beta 3 version of the player. You can find the code here. –Sho, May 11, 2006]

Here is a new version of the auto complete text input control, which is a cross between Google suggest, the “save information I typed in forms” preference found in browsers, and the HTML <select> control.

If you provide a static list of items to the control, the control can do the filtering. Alternatively, you can create a function to give suggestions (which is necessary if you are doing the filtering on the server).

As before, there is a “mustSelect” flag which turns the control into a sort of super version of the HTML <select> tag. The main benefit to using this instead of <select> is that using the keyboard to narrow down your choices is much easier.

Finally, I added the ability to automatically save form data as local storage and provide hints based on this data. This makes it behave similarly to HTML text fields in most browsers.

Unlike how browsers work (so far…) you can individually delete these hints. I hate it when I mistype something into a field and I get a hint for that typo every time I visit the app! With these controls, you can right mouse on any of the hints you don’t like and delete them.

Source code removed. Please use the more recent version referenced above.

~

Known issues:

  • Saved form data is never automatically removed, which may eventually lead to running out of shared object space. The user can always manually delete the saved form data using the right mouse
  • When you navigate through the hints, keyboard events continue to propagate to the control. So, for example, if you hit the up arrow while the hints are showing, the selection in the hint menu will move up one, and the insertion point in the text field will move all the way to the beginning of the control. This is due to a player limitation, and I am still struggling to find a good workaround.
  • Sometimes, when using the “keepLocalHistory” feature, you will find multiple versions of the same string in your history. I am 95% positive it is just a programming error on my part, but I can’t track it down. (help?)
  • Hints don’t reposition themselves if the control moves while the hint is visible.
  • A scrollbar appears in the hint dropdown even when not needed.
  • Do not use this for password fields! I have never actually tried it, but I bet you can get it to show you a popup that lists the last few passwords you’ve typed… Probably not what you want, security-wise!

Let me know what you think. And if you find any bugs, please let me know (especially if you have a fix!!)

22 Responses to “Flex auto complete text input control v0.6”

  1. James Lyon

    Very nice!

    And here I thought that the engineers wouldn’t make anything else that the community could do on their own. I’m glad to see you guys like experimenting as much as the community

  2. Sho

    Thanks! Playing around with Flex is something I feel like I need to do just to make sure I understand how everything works…

  3. Nick Selvaggio

    Thanks! This really helps me get my brain around developing/extending components in Flex 2. Loved the video by the way too!

    Nick

  4. Fernando

    Saved form data is never automatically removed, which may eventually lead to running out of shared object space. The user can always manually delete the saved form data using the right mouse

    I gues this is because you don’t have an event executed when the user exists the application, right? How about cleaning it on init?

    Sometimes, when using the “keepLocalHistory” feature, you will find multiple versions of the same string in your history. I am 95% positive it is just a programming error on my part, but I can’t track it down. (help?)

    Haven’t checked out the source yet but if you save the string as index of an object (save it lowercased) maybe you can directly reference it and see if there’s already one saved.

    Just guessing to give you ideas. Great work btw i really like this kind of experiments :)

  5. milan

    Thank you for improved and updated example. It is great!

  6. Aran

    Sho.

    This is very nice. Thanks for the exmaple.

    IE does let you delete individual entries by using your arrow keys to select the unwanted entry and press delete. I also use this technique in outlook for misspelt contact that auto-complete. Firefox doesn’t seem to let you though as you said :)

  7. Sho

    Aran: Thanks for the IE tip. I’ve used that feature in Outlook, but I never knew it worked in IE.

    As it turns out, I use Firefox for 80% of my browsing, so I’m still stuck…

  8. bokonn

    It look good and nice for MXML application. Is it can reuse in Action Script! I just try it can’t show on my way. How to do it?

    var myContainer : Container = new Container();

    var myCompletion: CompletionInput = new CompletionInput();
    myContainer.addChild(myCompletion);

    It can’t show popup!

  9. Sho

    Are you trying to create this in a Flex project, or an ActionScript-only project? It will not work in an ActionScript-only project.

  10. alimills

    Hello Sho. Hello bokonn.

    Last night I posted an article to my blog about ActionScript projects. The class I used for demonstration was an auto complete class that I’d written some time ago. bokonn, if you want to use the class in an ActionScript project feel free.

    The URL for the post is http://www.asserttrue.com/articles/2006/04/09/actionscript-projects-in-flex-builder-2-0.

    Nice component Sho!

  11. alimills

    The period at the end broke the above URL. Here it is again:

    http://www.asserttrue.com/articles/2006/04/09/actionscript-projects-in-flex-builder-2-0

  12. Brett

    none of these flex examples work in my browser. it’s a blank page. and i just installed flash player 8.0. what’s up?

  13. Sho

    These examples require Flash Player 8.5 beta 2.

  14. sho

    Updated code posted here.

  15. Hans Ospina

    Veeery nice component. it is great.

    Ate,
    Hancho

  16. cgmania

    Very nice!

    And here I thought that the engineers wouldn’t make anything else that the community could do on their own. I’m glad to see you guys like experimenting as much as the community

  17. Cosma Colanicchia

    Hello,

    I’m using your CompletionInput control, very nice work. I use its async capabilities, my filter function trigger a web service call, and the result handler update the completions property of the control.

    Now, I noticed a strange behaviour.. only on Internet Explorer, if the response arrives when the suggestions box is already open, it is closed (instead of being updated with new entries). I’ve tried to manually hide it using hideCompletions() before updating the completions, with no luck.

    The strange thing is that, using Firefox, it works flawlessy..

    Cosma

  18. Kelly

    Fabulous work!

    It’s really helpful for my development in control. Thanks for your contribution this such a work.

  19. File Not Found

    The links to the example and source code are both broken

  20. sho

    Please use the more recent version. I’ve removed the links to the old version.

  21. Hillel Coren

    Hey, I really dug your AutoComplete component. It didn’t quite have everything I was looking for but it inspired me to also try writing one. 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

  22. Nina

    I played a liltte with some programming languages before (mostly PHP and JavaScript, but just a liltte) and, recently, I became interested in learning a bit more about programming and chose AS3.Lots of people told me about AS3 and I’ve had my eyes on things like FlashPunk and Flixel before, so I thought I’d give it a try.Since I don’t have Flash Pro (my trial has expired and no money to buy it =/), just mixed a few tutorials I’ve found on the web (for textField, drawRect, movieClips and etc.) with this tutorial to build the example on Flashdevelop and the result was great!I thought it was fairly easy to build functions and make a (very) simple title screen and a game over screen.Great Tutorial! Hope I can finish at least one original game soon. =PThanks from Brazil! =P

Leave a Reply