使用jQuery UI自动完成功能，在输入“@”时显示建议。

Question

我正在使用jQuery UI AutoComplete功能来允许用户使用@mentions标记好友。默认情况下，自动完成建议会在您将焦点放在文本框上时立即出现。如何使建议只在键入“@”时出现？以下是我目前的代码：

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            ];
$("#tags").autocomplete({
    source: availableTags,
    minLength: 0
});

- Prabhu

---

一个简单粗暴的方法：给每个字符串添加“@”符号？ - James Khoury

我猜这应该是最后的办法了 :-) - Prabhu

Answer 1

您可以通过为自动完成的source选项提供一个函数来实现此功能：

var availableTags = [ /* Snip */];

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

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

$("#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 the user typed an "@": */
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            /* If they've typed anything after the "@": */
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            /* Otherwise, tell them to start typing! */
            } else {
                results = ['Start typing...'];
            }
        }
        /* Call the callback with the results: */
        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/BfAtM/2/ 请注意，这与此演示几乎相同，只是要求用户输入“@”。该代码位于source选项参数内。

希望对您有所帮助。

- Andrew Whitaker

---

@Prabhu：您需要在“input”中键入任何内容，并且只有在键入@时才会出现列表吗？例如，“我喜欢@JavaScript和@Html”会触发小部件两次吗？还是您只需要标记能力？ - Andrew Whitaker

您是否知道如何在文本框下方显示提示框，每次输入@时都会出现，提示框上会显示“开始输入以接收建议...”的信息？ - Prabhu

@Andrew 完美。你解决了我所有的问题。感谢你抽出时间！ - Prabhu

@Prabhu：在你的对象中，只要有value和label属性，label将被用作显示值，而value将是存储在输入框中的值。例如：[{ label: 'Andrew', value: 1234 }]。 - Andrew Whitaker

@Prabhu：这些只是自动完成源对象上的额外属性。您可以指定任何您想要的内容。在那个演示中，他们使用它们来显示描述并显示图标（也就是说，没有内置使用这些属性的内容）。 - Andrew Whitaker

Answer 2

截止本注释日期，我推荐使用 jquery.mentionsInput 插件。它支持类似于Facebook的@提及标记，包括头像和本地或Ajax数据。

http://podio.github.com/jquery-mentions-input/

- stereoscott

---

现在是404错误，你有什么建议吗？ - optimists

Answer 3

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

如果最终成为source值的数组为空，则小部件不会显示下拉列表。因此，将source定义为一个函数，只有在输入@时才能返回非空数组，这样小部件才会按您的要求运行。

然而，该小部件仅作为标签（在此称为提及管理实用程序）管理实用程序的组件之一运行，它有3个组件：

1. 自动完成模块：负责获取和显示可以用于创建提到的项集的组件，给定一个字符串。

2. 提及跟踪模块：负责跟踪提及相关数据的组件；至少应该在输入元素的文本的所有修改中跟踪每个提及的位置以及表面和实质（如果存在）值。

3. 提及可视化差异模块：负责将提及文本与附加实用程序的输入元素中的其他文本区分开来。

进一步深入剩下2个模块的实现，在普通英语中会很繁琐；最好看代码！幸运的是，我已经做了一个解决方案，Mentionator，它是强大的（比这里提出的所有其他解决方案都要强大），结构良好，易于遵循，并且有大量注释。因此，无论您是想要一个开箱即用的解决方案还是参考材料来创建自己的解决方案，都值得一看。

- Kevin