Question

I’m trying to impliment jqueryui’s autocomplete for multiple values but am having trouble. Options pop up fine when I first begin typing a name, but once that name is selected, a comma is added to the list and I no longer get options as I type. The code I have is below.

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

Thanks.

Answer 1

I had to do something very similar to this recently.

You need something like the following:

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

}