实现 jquery UI 自动完成以在您键入“@”时显示建议

Posted 2023-05-09

【中文标题】实现 jquery UI 自动完成以在您键入“@”时显示建议

【英文标题】：Implementing jquery UI autocomplete to show suggestions when you type "@"

【发布时间】：2011-08-23 19:08:14

【问题描述】：

我正在使用 jquery UI AutoComplete 来允许用户使用@mentions 标记朋友。默认情况下，当您将焦点放在文本框上时，自动完成建议就会出现。如何让建议仅在您键入“@”时出现？这是我到目前为止的代码：

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

【问题讨论】：

便宜又讨厌：在每个字符串中添加“@”？

我想这将是最后的手段:-)

【参考方案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/

请注意，这几乎与this demo 相同，只是要求用户键入“@”。该代码位于source 选项参数中。

希望对您有所帮助。

【讨论】：

正是我需要的。但是，是的，我确实需要能够多次触发搜索......基本上只要你输入@，列表就会出现（最好只有那些尚未添加到文本框的列表）。

@Prabhu：您是否需要在input 中输入任何内容，并且只在输入@ 时显示列表？例如“我喜欢@javascript 和@html”会触发两次小部件？还是只需要标记能力？

另外你知道我如何在每次你输入@时在文本框下方显示一个提示框，上面写着“开始输入以接收建议...”

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

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

【参考方案2】：

截至本文发布之日，我推荐 jquery.mentionsInput 插件。它支持@mention 标记，就像在 facebook 上一样，带有头像和本地或 ajax 数据。

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

【讨论】：

它的 404 现在，您有什么建议吗？

【参考方案3】：

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

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

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

自动完成模块：在给定字符串的情况下，该组件负责获取和显示可用于创建提及的项目集。

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

提及视觉区分模块：负责将提及文本与附加实用程序的输入元素中的其余文本区分开来的组件

用简单的英语进一步研究其余 2 个模块的实现会很乏味；查看代码要好得多！幸运的是，我提出了一个解决方案，Mentionator，它很健壮（比这里建议的所有其他解决方案都强）、结构良好、易于理解并且评论丰富。因此，无论您只是想要一个开箱即用的解决方案，还是需要参考资料来创建自己的解决方案，都值得一看。