Question

有很多选项用于自动完成。他们中的大多数似乎都在输入的前几个字母上工作。

在Google Plus中，自动填充选项在输入@后很快就会下降，无论它在表单字段中出现在何处，并使用@后面的字母来指导自动填充。（它看起来也很不错！）

是否有人共享代码来执行此类操作？

有没有人试图实现这个玩具版本（例如在jQuery中）？

Answer 1

这可以通过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的API）的示例：http://jsfiddle.net/LHNky/。它还包括自动填充建议的自定义显示。

Answer 2

我根据jQuery UI自动完成功能编写了一个jQuery插件。这是我的解决方案：

http://www.hawkee.com/snippet/9391/

你这样称呼它：


$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});

Answer 3

您可以使用自动填充搜索事件来检测文本中是否包含@。如果它不是@那么只返回false并且自动完成将不起作用。

例如： $（“。selector”）。autocomplete（{ 搜索：function（event，ui）{...} }）;

Answer 4

我为此编写了一个bootstrap插件。无论@在表单字段中出现在哪里，它都可以工作。它适用于ContentEditable div而不是文本区域：http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

为了详细阐述Andrew Whittaker的答案，jQuery UI Autocomplete的source选项用于指定一个数组，其中包含触发小部件后要在下拉列表中显示的项目。它可以定义为这样一个数组，一个返回这样一个数组的函数，或一个生成这种数组的资源的URL。

如果将source定义为函数，则函数request和response的参数可用于帮助组合其返回数组并分别将其提供给窗口小部件。 request特别感兴趣，因为它的成员term包含调用函数时附加小部件的输入元素的值。

看看我要去哪里？对于感兴趣的request.term符号和光标之间的文本，它非常简单，解析@，并使用该文本创建要提供给窗口小部件的数组。但是，您需要做一些工作（或使用一些现成的函数）才能以跨浏览器兼容的方式可靠地定位光标。

如果您正在寻找提供您尝试模拟的功能的现有插件，请查看Mentionator。它结构合理，易于理解，并且有很多评论，因此您应该很难理解如何采用我所描述的方法。它也是你的真正维护:)。

在文本中间自动完成（例如Google Plus）

5 个答案: