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!
I mixed up the
select
and thefocus
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.