中间单词的自动完成（jQuery UI）答案

【问题标题】：autocomplete of words in the middle (jQuery UI)中间单词的自动完成（jQuery UI）
【发布时间】：2012-01-06 08:39:44
【问题描述】：

任何人都知道使用 jQuery UI 的自动完成小部件的优秀示例代码，它可以自动完成文本框中间的单词，而不仅仅是自动完成末尾的单词？

我正在将 jquery UI 自动完成小部件用于支持输入多个标签的组件。它就像堆栈溢出的标签编辑器，但更简单：自动完成下拉菜单中没有花哨的格式，编辑框中没有“标签”背景图像。我从jQuery UI Autocomplete Multiple sample 开始并对其进行了修改。

它工作正常，除了自动完成不适用于多标签字符串中间的标签。例如，如果我输入C Fortran，然后将插入符号放在C 之后并输入+，我希望在自动完成列表中看到C++，但我会再次看到Fortran。

这是目前的代码：http://jsfiddle.net/WCfyB/4/

这与autocomplete in middle of text (like Google Plus) 描述的问题相同，但该问题中的问题更简单，因为他可以依靠文本中的空@ 来指示何时显示自动完成功能。就我而言，我不能只依赖文本——我实际上需要找出插入符号的位置并自动完成插入符号所在的单词。

我可以使用插入符号或其他插件自己构建它，但想知道是否已经有一个基于 jQuery-UI 的在线示例，我可以在不重新发明另一个轮子的情况下使用它，特别是如果存在特定于浏览器的极端情况担心。理想情况下，它的行为是这样的：每当用户将插入符号放在标签内或标签末尾（标签始终由 1+ 个空格分隔）时，都会为该标签显示自动完成功能。知道一个好的样本吗？

【问题讨论】：

标签： jquery-ui jquery-ui-autocomplete

【解决方案1】：

我不知道这样的例子，但你可以从这里开始：

var availableTags = [ ... ]; 

function split(val) {
    return val.split(/ \s*/);
}

function extractLast(term) {
    return split(term).pop();
}

$("#tags")
    .bind("keydown", function(event) {
        // don't navigate away from the field on tab when selecting an item
        if (event.keyCode === $.ui.keyCode.TAB
                                   && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function(request, response) {
            var results = [],
                selectionStart = this.element[0].selectionStart
                term = extractLast(request.term.substring(0, selectionStart));

            if (term.length > 0) {
                results = $.ui.autocomplete.filter(availableTags, term);
            }
            response(results);
        },
        focus: function() {
            return false; // prevent value inserted on focus
        },
        select: function(event, ui) {
            var terms = split(this.value.substring(0, this.selectionStart));
            terms.pop();  // remove the current input
            terms.push(ui.item.value);        // add the selected item
            this.value =
                $.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " ";
            return false;
        }
    });

示例： http://jsfiddle.net/WCfyB/7/

这里的主要警告是selectionStart 方法在 IE 中不起作用。您可以将这些函数调用替换为您在问题中提到的插件之一。

【讨论】：