Javascript jQuery自动完成多个值
我试图为多个值实现jqueryui的自动完成,但遇到了麻烦。当我第一次开始键入一个名称时,选项会弹出,但一旦选择了该名称,列表中就会添加一个逗号,并且我在键入时不再获得选项。下面是我的代码Javascript jQuery自动完成多个值,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我试图为多个值实现jqueryui的自动完成,但遇到了麻烦。当我第一次开始键入一个名称时,选项会弹出,但一旦选择了该名称,列表中就会添加一个逗号,并且我在键入时不再获得选项。下面是我的代码 function fillAutoComplete(friends_list) { $('input#opponents').autocomplete({ minLength:0, source: $.map(friendList, function(item) { retur
function fillAutoComplete(friends_list) {
$('input#opponents').autocomplete({
minLength:0,
source: $.map(friendList, function(item) {
return {
label: item.name,
value: item.name,
id: item.id
}
}),
focus: function() {return false},
multiple: true,
select: function(event, ui) {
var terms = (this.value).split(/,\s*/);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
var temp = $('input#oppID').val();
if(temp != "") {
$('input#oppID').val(temp + "," + ui.item.id);
} else {
$('input#oppID').val(ui.item.id);
}
return false;
}
});
}
谢谢。最近我不得不做类似的事情 您需要以下内容:
function fillAutoComplete(friends_list) {
$('input#opponents')
.keydown(function(event) {
var menuActive = $(this).data('autocomplete').menu.active;
if (event.keyCode === $.ui.keyCode.TAB && menuActive)
event.preventDefault();
})
.autocomplete({
source: function(request, response) {
// Apply filtering to list based on last term of input.
var term = request.term.split(/[,;]\s*/).pop();
if (!term) {
response([]);
return;
}
// Process list of friends.
var list = $.map(friends_list, function(item) {
return {
label: item.name,
value: item.name,
id: item.id
}
});
// Apply filtering.
list = $.grep(list, function(item) {
return item.name.indexOf(term) === 0;
});
// Invoke jQuery callback.
response(list);
},
focus: function() {
var terms = this.value.split(/[,;]\s*/);
terms.pop();
terms.push( ui.item.value );
this.value = terms.join(', ');
return false;
},
select: function(event, ui) {
var terms = this.value.split(/[,;]\s*/);
terms.pop();
terms.push(ui.item.value);
terms.push('');
this.value = terms.join(', ');
return false;
}
});
}