javascriptjqueryjquery-autocomplete

jQuery autocomplete select function not firing


I am writing a re-usable wrapper around jQuery autocomplete and for some reason I can't get the select callback to work.

Given the code below, the select() function is never invoked. What have I screwed up? Is there some hidden constraint on how you specify select callbacks with the jQuery autocomplete widget?

NOTE: this is only half-written. Just trying to get select working.

// Note: 'input' is a jQuery object.
name.space.ThingSuggest = function(input) {
  this.input = input;

  // Set up an autocomplete widget on the given input form.
  this.input.autocomplete({
    source: name.space.ThingSuggest.SOURCE_URL,
    delay: 500,
    select: this.select.bind(this)
  });

  this.input.autocomplete('instance')._renderItem = name.space.ThingSuggest.renderItem;
};

name.space.ThingSuggest.SOURCE_URL = // some URL

name.space.ThingSuggest.prototype.select = function(event, ui) {
  this.input.val(ui.item.label);

  return false;
};

name.space.ThingSuggest.renderItem = function(ul, item) {
  return $('<li>', { value: item.value })
      .append(item.label + ' <span>@' + item.username + '</span>')
      .appendTo(ul);
};

TO BE CLEAR, autocompletion and _renderItem are working as expected. It is only the suggest callback that isn't firing.

I've been staring at this way too long...so for all I know it's a stupid mismatched brace or something.

Thanks in advance!


Solution

  • I mixed up the select and the focus events. Because I'm really really dumb.

    select does in fact work in the code example above, but I wasn't triggering it because I was simply moving focus within the list, not actually clicking/selecting an entry.

    What I actually wanted to do--use a callback on list item focus change--requires use of the focus callback instead.