Javascript jQuery自动完成多个值

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

我试图为多个值实现jqueryui的自动完成,但遇到了麻烦。当我第一次开始键入一个名称时,选项会弹出,但一旦选择了该名称,列表中就会添加一个逗号,并且我在键入时不再获得选项。下面是我的代码

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;
        }
    });

}