11

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

@在 Google Plus 中，无论它出现在表单字段中的哪个位置，自动完成选项都会在键入后立即下拉，并使用紧随其后的字母@来引导自动完成。（它看起来也很不错！）

有没有人共享代码来做这种事情？

有没有人有任何尝试实现这个玩具版本的指针（例如在 jQuery 中）？

4

5 回答 5

18

这可以通过jQueryUI 的自动完成小部件来实现。具体来说，您可以调整此演示以满足您的要求。这是一个例子：

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/。它还包括自动完成建议的自定义显示。

于 2011-08-28T17:28:47.367 回答
1

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

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

你这样称呼它：


$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});
于 2012-05-06T03:46:34.407 回答
0

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

例如： $( ".selector" ).autocomplete({ search: function(event, ui) { ... } });

于 2011-08-17T12:37:07.807 回答
0

我为此写了一个引导插件。无论@ 出现在表单字段中的哪个位置，它都有效。它用于 ContentEditable div 而不是文本区域：http ://sandglaz.github.com/bootstrap-tagautocomplete/

于 2013-03-26T16:25:59.237 回答
0

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

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

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

如果您正在寻找提供您尝试模拟的功能的现有插件，请查看Mentionator 。它结构良好，易于理解，并且评论丰富，因此您应该毫不费力地理解如何采用我所描述的方法。它也由您真正维护:)。

于 2016-07-03T19:02:47.073 回答