jQuery autocomplete with multiple ajax'd values

Question

been following the documentation from the UI site, and looked at a number of tutorials and got my code sort of working, it ajax's in the list of terms I want, and you can select one and it places the value and then ", ". However, afterwards it doesn't prompt again for a second value.

Also, when I enter a partial and say 10 entries pop up, tabbing just goes to the next form field, not sure what's wrong with my .bind, perhaps a setting? If anyone wouldn't mind taking a look, it'd be much appreciated!

function split(val) {
            return val.split(/,\s*/);
        }

        function extractLast(term) {
            return split(term).pop();
        }

       jQuery('#tagSearch')
            .bind('keydown', function(event) {
                    if (event.keyCode === jQuery.ui.keyCode.TAB &&
                         jQuery(this).data('autocomplete').menu.active) {
                            event.preventDefault();
                    }
            })
           .autocomplete({
              autoFocus: true,
              source: function(request, add) {
                    console.log('source');
                    jQuery.getJSON('/get-tags-like.php?term_start=' + request.term, function(response) {
                        var possibleTerms = [];

                        jQuery.each(response, function(i, val) {
                            possibleTerms.push(val.name + ' ' + '(' + val.count + ')');
                        });

                        add(jQuery.map(possibleTerms, function(item) {
                            console.log(possibleTerms);
                            return item;
                        }));        
                    });
              },
              focus: function() {
                  console.log('focus');
                return false;
              },
              select: function(event, ui) {
                  console.log('select');
                  var terms = split(this.value);

                  terms.pop();

                  terms.push(ui.item.value);

                  terms.push('');

                  this.value = terms.join(',');

                  // At this point, example:
                  // Sony (5)
                var currentVal = this.value;

                  // Sony (5) - Gets inserted as "Sony"
                  currentVal = currentVal.replace(/\s\(.\)/, '');

                  this.value = currentVal;

                  return false;
              },
              minLength: 2
           });

Answer 1

However, afterwards it doesn't prompt again for a second value.

Make sure you're typing more than 2 characters. The function passed to search is preventing a search with less than two characters from causing a search:

search: function() {
      var term = extractLast(this.value);

      if (term.length < 2) {
          return false;
      }
},

---

Also, when I enter a partial and say 10 entries pop up, tabbing just goes to the next form field, not sure what's wrong with my .bind, perhaps a setting?

The bind at the beginning is attempting to prevent the user from tabbing from the field when an autocomplete candidate is highlighted. With a single value autocomplete, this usually is not a problem because first the menu item is selected, placed in the input, and then focus is lost.

This changes when you want multiple values in the input. We want to stop that default action of keydown that changes focus to the next input field.

autocomplete has an autoFocus option that will be useful here. It will ensure that a candidate is always selected when the user hits tab after typing.

I'm not able to exactly replicate your situation, but I've created a demo that doesn't exhibit either of the problems that you are experiencing (all I've really done is change the source and add the autoFocus option): http://jsfiddle.net/zTVKC/