View Full Version : IntelliSense in TextArea

22 Jan 2012, 10:23 PM
Are there any examples of this?

Let's say you have a standard TextArea component. As you type, or if you hit a keyboard combination (like CTRL+Space) then a ComboBox would pop up by the cursor. This is a common situation in IDEs like Visual Studio, IntelliJ IDEA, etc.


22 Jan 2012, 10:36 PM
Use the triggerField and just hide the trigger. This will effectively provide the functionality you desire.

Here's a good example: http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html

22 Jan 2012, 10:41 PM
You should pay attention on listener in textarea field like specialKey (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.TextArea-event-specialkey) where you can check for CTRL+Space combinations and show comboBox in current position.

22 Jan 2012, 10:46 PM
Well that's for the entire textfield/area. I am just looking for a pop up combobox/triggerfield that I can conjure up as a layer above the textfield/area. Maybe all it is is a "context menu" type of popup that contains a comboboxt/triggerfield? Something like the attached image:


22 Jan 2012, 10:47 PM
Yeah iceman. Something like that. I will have to experiment and see what I come up with. I was just wondering if there is some kind of plugin that already exists. I guess not.

23 Jan 2012, 12:14 AM
Well I am able to catch the events specialkey and keydown, both of those will tell me if CTRL and SPACE were triggered, respectively. But how can I test them both in the same event? These events are mutually exclusive.

Since I am using MVC, I don't suppose there is a way to communicate between these events? Is there a way I can declare a variable in this controller so I can set a flag that CTRL is currently pressed?

Beyond that...the next question is...how do I get the current XY of the cursor so as to pop a combobox there?


23 Jan 2012, 1:35 AM
Try to use keyMap (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.KeyMap) to identify which keys are pressed.
For locate XY position ... may be getPosition (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.TextArea-method-getPosition) method can help.

23 Jan 2012, 8:56 AM
Yes KeyMap looks exactly like what I need.

However, getPosition() probably won't work. This will give me the XY of the TextArea. I need the XY of the cursor in the TextArea.

Does anybody have any thoughts?

23 Jan 2012, 3:33 PM
So what I have come to realize is that it's not a trivial solution.

Here is an example:


This article provides insight into this interesting problem:


23 Jan 2012, 3:50 PM
This looks quite interesting! :-?

Are you looking to create an online IDE on combination with ACE ( http://ace.ajax.org/ ) ?

23 Jan 2012, 3:59 PM
I have something in mind using Ace for one project. I have something else in mind for another project. Both will use the functionality in this thread.