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

} 

：

は、次のようなものが必要