By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,658 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

AutoComplete <Textarea>

P: 58
Hi frnds,
I have got a strange requirement,i.e i have to make a <Textarea>
with AutoComplete attribute.so that it il suggest the user with a list of
previously entered values.

Is thr any way to achieve this using javascript or with AJAX???
It il be great,if i am given with some samples.



Thanks in advance,
sundar
Oct 9 '07 #1
Share this Question
Share on Google+
4 Replies


numberwhun
Expert Mod 2.5K+
P: 3,503
Hi frnds,
I have got a strange requirement,i.e i have to make a <Textarea>
with AutoComplete attribute.so that it il suggest the user with a list of
previously entered values.

Is thr any way to achieve this using javascript or with AJAX???
It il be great,if i am given with some samples.



Thanks in advance,
sundar
This isn't something that HTML or CSS can do for you (that I know of), unless there is some new advancement.

You will probably have to code that in a language such as Perl, PHP, or Python.

Also, what are you trying to auto complete? Email addresses? Dates?
Oct 9 '07 #2

P: 58
This isn't something that HTML or CSS can do for you (that I know of), unless there is some new advancement.

You will probably have to code that in a language such as Perl, PHP, or Python.

Also, what are you trying to auto complete? Email addresses? Dates?
its a list of descriptions entered by user during previous visit.
regards,
sundar
Oct 9 '07 #3

numberwhun
Expert Mod 2.5K+
P: 3,503
its a list of descriptions entered by user during previous visit.
regards,
sundar
I think you would have to either rely on the system the user is using to offer the suggestions once they start typing (happens today when I fill out forms in my Firefox browser) or you would have to code for it.

Regards,

Jeff
Oct 9 '07 #4

P: 1
You can absolutely do this with Javascript (and/or AJAX). If it's a large number of possible autoComplete entries you'll need to use AJAX for speed reasons, but for shorter lists of autoComplete possibilities you can just use a javascript array. The process consists of four basic components:

1. Detect current carat position: See http://www.csie.ntu.edu.tw/~b88039/h...lib/caret.html . Basically, onKeyPress or onKeyDown o(and onFocus), ask for the cursor position.

2. Get the active word: Using the carat position, and the textarea value (str):

Expand|Select|Wrap|Line Numbers
  1. var stringToCursor = str.substring(0, caratPosition);
  2. var start = (stringToCursor.lastIndexOf(" ") + 1); //find where the word starts
  3. //correct for line breaks (so it works on words seperated by spaces AND line breaks
  4.     if(start < stringToCursor.lastIndexOf('\n')){start = stringToCursor.lastIndexOf('\n') + 1;};
  5. var activeWord = str.substring(start, caratPosition);
3. Find Matches: Compare the active word against a javascript array or a database (ajax) to see if it matches the begining of any autoComplete words.

4. Autocomplete: Have the aforementioned function automatically replace the active word or create a popup with suggestions which can replace the word using methods similar to step 2 to find the original word fragment and replace it with the new autoCompletion word at the carat (and you'll probably want to reset the carat at the end of the inserted entry (using range.move() or setSelectionRange() depending on browser).
Nov 5 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.