类似 Google 的 jQuery UI 自动完成

Question

是否可以只向服务器发送 textarea 中的最后 3 个单词并自动填充最佳结果，让用户继续输入（类似于 Google 自动完成）？

我希望行为是：

1. N[ew]
2. 新[呃]
3. 新（SPACE）[er]
4. 新 [纽约]
5. 新 c[ar]
6. 新猫 [食物]
7. 新猫（TAB）[食物]
8. 新猫粮 [制作]
9. ...
10. 新的猫粮对你的猫有好处 [健康]

（澄清：[方括号]表示自动输入的建议，粗体表示正在发送到服务器的部分，（TAB）和 (SPACE) 表示按 Tab 和空格键）

我已经在服务器上拥有预测下一个单词的功能（使用马尔可夫链），并且我已经集成了 jQuery UI 自动完成功能，但目前它只是将所有文本发送到服务器并创建一个包含所有建议的列表以供选择从，一旦你选择它会改变整个文本。

所以最终会涉及到这些问题：

1. 如何只发送最后一部分？
2. 如何附加+选择建议的单词？
3. 如何在 Tab 键上进行选择？

Answer 1

好的 - 这是解决方案（这里是result）：

1 + 2：我没有管理单个输入框，而是使用两个相同大小的文本区域，第一个 (#text-area) 启用并具有透明背景，另一个 (#suggestions) 已禁用并具有灰色文本颜色.我使用source 回调来完成所有工作：

$('#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：tab键选择是通过触发自动完成搜索事件来完成的：

$('#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());
      }
});