jQuery autocomplete select function not firing

697 views Asked by At

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!

2

There are 2 answers

0
honktronic On BEST ANSWER

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.

0
Leonardo Souza Paiva On

i had no idea where to post this, it probably has nothing to do with the post, but I would like to draw your attention to that, I was using the wrong version of jquery autocomplete, not jquery ui one, but one from an npm package that had nothing to do with jquery ui, so if you are not getting the "select" event fired, try to download the version from the jquery site ui.

https://jqueryui.com/download