jQuery autocomplete plusieurs valeurs

Question

J'essaye d'implémenter la saisie semi-automatique de jqueryui pour plusieurs valeurs mais j'ai des problèmes. Les options s'affichent correctement lorsque je commence à taper un nom, mais une fois ce nom sélectionné, une virgule est ajoutée à la liste et je ne reçois plus d'options au fur et à mesure que je tape. Le code que j'ai est ci-dessous.

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

Merci.

Answer 1

J'ai dû faire quelque chose de très similaire à cela récemment.

Vous avez besoin quelque chose comme ce qui suit:

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

}