javascript - jQuery 自动完成多个值

Question

我正在尝试为多个值实现 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; 
      }
    });
}

谢谢。

Answer 1

我最近不得不做一些与此非常相似的事情。

您需要如下内容:

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

}