jquery – 文字中间的自动填充(如Google Plus)

有很多选择在做自动完成.他们大多数似乎在打字的前几个字母上工作.

在Google Plus中,自动填充选项会在输入“@”后立即下载,无论表单域出现在哪里,并使用@之后的字母引导自动填充. (它也看起来很不错！)

有没有人共享代码做这样的事情？

有人有任何指针试图实现这个玩具版本(例如在jQuery中)？

解决方法

这可以用 jQueryUI’s autocomplete widget.具体来说,您可以调整 this demo以满足您的要求.以下是一个例子：

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

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

var availableTags = [ ... ]; // Your local data source.

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown",function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,source: function(request,response) {
        var term = request.term,results = [];
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags,term);
            }
        }
        response(results);
    },focus: function() {
        // prevent value inserted on focus
        return false;
    },select: function(event,ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

这里工作：http://jsfiddle.net/UdUrk/

如果您需要更多信息(例如如何使用远程数据源),请告知我们.

更新：以下是使用远程数据源(StackOverflow’s API)的示例：http://jsfiddle.net/LHNky/.它还包括自动填充建议的自定义显示.