有很多选择在做自动完成.他们大多数似乎在打字的前几个字母上工作.
在Google Plus中,自动填充选项会在输入“@”后立即下载,无论表单域出现在哪里,并使用@之后的字母引导自动填充. (它也看起来很不错！)
有没有人共享代码做这样的事情？
有人有任何指针试图实现这个玩具版本(例如在jQuery中)？
解决方法
这可以用
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’s API)的示例：http://jsfiddle.net/LHNky/.它还包括自动填充建议的自定义显示.
