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):
- var stringToCursor = str.substring(0, caratPosition);
-
var start = (stringToCursor.lastIndexOf(" ") + 1); //find where the word starts
-
//correct for line breaks (so it works on words seperated by spaces AND line breaks
-
if(start < stringToCursor.lastIndexOf('\n')){start = stringToCursor.lastIndexOf('\n') + 1;};
-
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).
58
