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:

1. N[ew]
2. New[er]
3. New(SPACE)[er]
4. New [York]
5. New c[ar]
6. New cat [food]
7. New cat (TAB) [food]
8. New cat food [makes]
9. …
10. 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:

1. How to send only the last part?
2. How to append + select the suggested word?
3. 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());
      }
});