# Autocompleter in textarea on character event

**URL:** <https://www.ruby-forum.com/t/autocompleter-in-textarea-on-character-event/151632>\
**Category:** Rails\
**Created:** [October 23, 2008, 4:03pm UTC](https://www.ruby-forum.com/t/autocompleter-in-textarea-on-character-event/151632 "2008-10-23T16:03:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![shariefsk](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/54ee81/32.png) [@shariefsk](https://www.ruby-forum.com/u/shariefsk)\
**Post date:** [October 23, 2008, 4:03pm UTC](https://www.ruby-forum.com/t/autocompleter-in-textarea-on-character-event/151632/1 "2008-10-23T16:03:03Z")

</div>

Hi,

I have a usecase of calling an Autocompleter.Local when a special  
character is typed in the textarea. The autocompleter will suggest a  
drop down matching the characters that user typed after the special  
character and lets the user pick from the list to fill it.

Here is what I have done,

When the user clicks in the textarea, I fetched an array of elements  
by  
sending an ajax request to the controller function which renders a  
jason  
object array. I collected the response from the callback function of  
my  
ajax reqest and evaluated the jason object and stored the elements in  
a  
javascript global array. Well this serves my purpose of fetching the  
array on request only and to be able to pass to the  
Autocompleter.Local  
function of scriptaculous with the “token” as my special character(say  
@).

Now, here comes the story. When I try to call the Autocompleter.Local  
typing the “@” an autocompleter dropdown pops and let me choose using  
the mouseclick. But when I try to select using the navigation keys  
(KEY\_RETURN or KEY\_TAB) it doesnt work as expected.

Here is the exact problem. Let my array be  
var my\_array =  
[“RForum1”,“RForum2”,“RForum3”,“RForum4”,“RForum5”,“RForum6”,“RForum7”,“RForum8”,“RForum9”,“RForum10”]

and the autocompleter call as,

function okKeyDownPollingFunction(event.value){  
if (event.value == 50){ //char value for @  
new Autocompleter.Local(‘textarea\_id’, ‘div\_id’, my\_array,  
{tokens:  
‘@’})  
}  
}

Now when I type “@R|” ("|" indicates cursor position)in the textarea  
the  
dropdown pops and lets me select(say RForum2) using the RETURN KEY(or  
TAB KEY)and fills as @RForum2 in the text area. When i type @R| (or  
@RF  
or @RFo…) again and selected RForum1 it displays as  
“@RForum2 \<something/nothing\> @RForum1rum1” when cursor as in @RFo|  
(pattern repeats once),  
“@RForum2 \<something/nothing\> @RForum1m1” when cursor as in @RForu|  
(pattern repeats twice),  
“@RForum2 \<something/nothing\> @RForum1m1 \<something/nothing\>  
@RForumorumorum” when cursor as in @RF|, (third time use of “@”  
pattern  
repeats thrice)

Can some one help me out as this seems impossible for a young  
developer  
like me. I tried to debug the controls.js, the scriptaculous source  
file, but invain.

Any other alternative for the same usecase or fix/patch for  
scriptaculous that would let me fix the problem is much appriciated.

Thanks in advance!

S M Sharief  
removed\_email\_address@domain.invalid