Google-like jQuery UI autocomplete - html

Question

Is it possible to send the server only the last 3 words in the textarea and to autofill the best result, letting the user keep typing in (similar to Google auto complete)?
I want the behavior to be:
N[ew]
New[er]
New(SPACE)[er]
New [York]
New c[ar]
New cat [food]
New cat (TAB) [food]
New cat food [makes]
...
New cat food is good for your cat's [health]
(clarification: the [square brackets] indicates the suggestion that is automatically being typed in, the bold text indicates the part being sent to the server, (TAB) and (SPACE) indicates tab and space key presses)
I already a have function on the server for predicting the next word (using Markov chains) and I have integrated jQuery UI autocomplete, but currently it just sends all the text to the server and creates a list with all the suggestions to choose from, once you choose it changes the whole text.
So it eventually comes to these issues:
How to send only the last part?
How to append + select the suggested word?
How to select on Tab key?

Answer 1

Okay - here is the solution (and here is the result):
1 + 2: Instead of managing a single input box, I use two identical size textarea's, the first (#text-area) is enables and with transparent background and the other (#suggestions) is disabled and with gray text color. I use the source callback to do all the work:
$('#text-area').autocomplete({ ...
source: function( request, response ) {
if (request.term.length < 3) {
return false;
}
$.getJSON( $SCRIPT_ROOT + '/_get_word', {
term: request.term
}, function(data) {
$('#suggestions').val(data.result) //suggestion is the disabled textarea
}
);
return false;
},
...
});
});
3: the tab key selection is done with triggering the autocomplete search event:
$('#text-area').live( "keydown",'textarea', function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB) {
event.preventDefault();
$('#text-area').val($('#suggestions').val());
$("#text-area").autocomplete('search', $('#text-area').val());
}
});