我正在使用 jquery UI AutoComplete 来允许用户使用 @mentions 标记朋友。默认情况下，只要您将焦点放在文本框上，就会显示自动完成建议。如何让建议仅在您键入“@”时出现？这是我到目前为止的代码：
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
];
$("#tags").autocomplete({
source: availableTags,
minLength: 0
});
您可以通过为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
希望有帮助。
截至本说明的日期，我推荐jquery.mentionsInput插件。它支持@mention 标记，就像在 facebook 上一样，包括头像和本地或 ajax 数据。
为了稍微解释 Andrew Whittaker 的回答source，jQuery UI Autocomplete 选项用于指定一个数组，其中包含触发小部件后将在下拉列表中显示的项目。它可以定义为这样一个数组、一个返回这样一个数组的函数或一个指向产生这样一个数组的资源的 URL。
如果最终成为 值的数组source为空，则小部件将不会显示下拉列表。因此，定义source为仅在 @输入时才能够返回非空数组的函数将使小部件按照您的意愿运行。
然而，该小部件仅作为标签（此处称为提及）管理实用程序的组件的一部分起作用，该实用程序具有 3 个组件：
自动完成module：负责采购和显示可用于创建提及的项目集的组件，给定一个字符串。
提及跟踪module：负责跟踪提及相关数据的组件；至少应在对附加实用程序的输入元素文本的所有修改中跟踪每个提及的位置以及表面和实质性（如果存在）值。
提及视觉区分module：该组件负责将提及文本与附加实用程序的输入元素中的其余文本区分开来
用简单的英语深入研究其余 2 个module的实现将是乏味的；看代码要好得多！幸运的是，我制定了一个强大的解决方案Mentionator（比这里建议的所有其他解决方案更强大），结构良好，易于理解，并且评论丰富。因此，无论您只是想要一个开箱即用的解决方案，还是创建自己的参考资料，都值得一看。