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

Would the autocomplete's binding of the keydown event interfere with yours? — Dave Newton
– Dave Newton, Commented Sep 10, 2011 at 21:24

Andrew Whitaker · Accepted Answer · 2011-09-10 21:54:03Z

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/

edited Sep 10, 2011 at 21:54

answered Sep 10, 2011 at 21:41

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Andrew Whitaker Over a year ago

@John: Interesting... Is it what you're searching for maybe? If you search for the same thing twice (which should return the same results), does that make any difference?

Andrew Whitaker Over a year ago

Have you tried using a tool like Firebug to debug through the AJAX success?

Andrew Whitaker Over a year ago

Is your server-side code returning true, or is that the result of the post-processing that happens in the callback?

Andrew Whitaker Over a year ago

No problem, I'd like to figure it out too. I see your edits... You shouldn't need the call to .map(). Is this code at a public URL somewhere?

user652650 Over a year ago

I fixed it actually! By making request.term = extractLast(request.term) at the beginning of the source function. I appreciate all the help again!

|

Collectives™ on Stack Overflow

jQuery autocomplete with multiple ajax'd values

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related