Flex autocomplete in textarea

I want to add an autocomplete feature into a textarea using a custom tooltip. As the user type in the textarea, a tooltip will popup with a list of "like words or phrase", and the user can click on the word or phrase to output it in the textarea.(kind of like the t9 feature on a mobile phone)
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I haven't tried any of these components yet, but they are worth taking a look at:

If you end up giving them a try, please share your results with us. :)

Good luck with your programming,
NewbsterAuthor Commented:
Actually, I tried those autocomplete solutions already... it only works for single line. I need something for a textarea.
Ah, I see.

How good are you with ActionScript? If you feel your are up for the challenge, you can use an "auto complete framework" such as one of the ones I provided links for, and instead listen for when text changes on the TextArea.

When it does, you can detect the current cursor position with "the_text_area.textField.caretIndex"
Then you can use various string commands such as "substring()" or "charAt()" to find out which letters the users have already typed

Then manually call the autocomplete libraries using this information, and find out which words are likely picks.

Do you understand the process I am recommending? Is there any part of it you want me to explain in more detail?

Good luck with your programming,
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

NewbsterAuthor Commented:
Thanks for the quick response, I was thinking about something like that too, but the current autocomplete(the one from the links above)  is a extended from a combobox. I would like ithe dropdown to be right under the text (under current cursor position). The only way I can think of is to use  a custom tooltip bc it can popup at any position on the page.

Tooltip issue so far:
1. cursor position = to the textarea position ... not the x and y of the page ... so I cant position the tooltip under the cursor
2. cant (note sure how to) execute a custom tooltip with components  through "change" event ... I can open default tool tip using Tooltipmanager

Regarding issue #1, the "getCharBoundries()" function returns a rectangle object which says the boundaries of the passed in character.

If you can create a tooltip which hovers right below that Rectangle, you are in business.

Do you need some sample code for that, or do you think you can handle it on your own?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NewbsterAuthor Commented:
cool thx
NewbsterAuthor Commented:
I extended the TextArea to get into the protected Textfield.

x  = TextArea.Textfield.getCharboundaries( TextArea.textfield.caretIndex-1).x;
y = TextArea.Textfield.getCharboundaries( TextArea.textfield.caretIndex-1).y;

I got that workin thanks to you...

Now, I need to somehow add components(gridbox) to the tooltip using TooltipManager.
You don't necessarily need it to be a tooltip. Just create a new sprite and populate it with the gridbox, and have it hover on top of all items exactly where you want it.

Do you need code for this, or do you think you can handle it?
NewbsterAuthor Commented:
I can draw shapes on the sprite and it will be visible, but when I add a component to sprite, it is not visible.

var but:Button = new Button();
but.width = 100;
but.label = "sdfdsf";

sprite = new Sprite();
sprite.x = inputX;
sprite.y = inputY+20;

Don't add it as a child of the TextArea. Instead, add it directly to the stage or whatever sprite is your main document class.

Also, make sure you don't mix up local coordinates and global ones. Are you experienced enough with ActionScript to know the difference?

I'm also not sure if TextArea is a DisplayObjectContainer (meaning it can hold other items). I know the TextField DEFINITELY isn't a container. Try adding it as a "sibling" instead of a child. It will make things a lot easier.

Do you understand how to do this, or do you need some actual ActionScript for it?
NewbsterAuthor Commented:
I just got it working... i added it to a container... the sprite is position where i wanted as i type in the text area... so next up ... autocomplete functionality, but i got it from here .... thx for ur help.

This is how i did the coordinate:

var inputX:Number = a.myTextField.getCharBoundaries(a.myTextField.caretIndex - 1).x;
var inputY:Number = a.myTextField.getCharBoundaries(a.myTextField.caretIndex - 1).y;

 coorX = event.currentTarget.x + inputX;
 coorY = event.currentTarget.y + inputY  +20;
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.