« Layering Flex over AJAX and collaborating with data services -- whoa! | Main | AS3 technique -- using object instances as "enums" »
April 03, 2006
Flex auto complete text input control v0.6
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.
NOTE: Flex beta 2 is REQUIRED for viewing or using this control.
[Sample -- Simple form using CompletionInput]
[Source code]
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!!)
Posted by sho at April 3, 2006 10:41 AM
Trackback Pings
TrackBack URL for this entry:
http://weblogs.macromedia.com/mtadmin/mt-tb.cgi/7263
Comments
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
Posted by: James Lyon at April 3, 2006 03:47 PM
Thanks! Playing around with Flex is something I feel like I need to do just to make sure I understand how everything works...
Posted by: Sho at April 3, 2006 06:45 PM
Thanks! This really helps me get my brain around developing/extending components in Flex 2. Loved the video by the way too!
Nick
Posted by: Nick Selvaggio at April 4, 2006 12:02 PM
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 :)
Posted by: Fernando at April 4, 2006 02:10 PM
Thank you for improved and updated example. It is great!
Posted by: milan at April 4, 2006 02:13 PM
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 :)
Posted by: Aran at April 4, 2006 08:27 PM
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...
Posted by: Sho at April 5, 2006 08:40 AM
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!
Posted by: bokonn at April 9, 2006 02:28 AM
Are you trying to create this in a Flex project, or an ActionScript-only project? It will not work in an ActionScript-only project.
Posted by: Sho at April 9, 2006 11:02 AM
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!
Posted by: alimills at April 10, 2006 09:22 AM
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
Posted by: alimills at April 10, 2006 09:23 AM
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?
Posted by: Brett at April 17, 2006 08:11 AM
These examples require Flash Player 8.5 beta 2.
Posted by: Sho at April 17, 2006 08:55 AM
Great work, what I'd like to see is for instance this:
test
test2
At the moment, this never shows the test or test 2 suggestions, because mustPick isn't set to true. But it would be nice to have this working, so users can pick a suggestion, or type something themselves. Maybe I'll look into the code and see if it's an easy thing.
Posted by: Jonas Windey at April 26, 2006 01:01 AM
Ok, that last code didn't show up, here's the correct one:
<ui:CompletionInput>
<mx:String>test</mx:String>
<mx:String>test2</mx:String>
</ui:CompletionInput>
Posted by: Jonas Windey at April 26, 2006 01:05 AM
this is me
Posted by: dean at April 27, 2006 08:12 AM