Title: jQuery autocomplete select function not firing
Tags: javascript;jquery;jquery-autocomplete
Question: 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&gt;', { value: item.value })
.append(item.label + ' <span&gt;@' + item.username + '</span&gt;')
.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!
Comment: how are you creating `name.space.ThingSuggest` instance ? because it seems to be working fine http://jsfiddle.net/dhirajbodicherla/DLLVw/949/

Comment: @honktronic  I am sorry, I forgot to update fiddle. Check this http://jsfiddle.net/dhirajbodicherla/DLLVw/950/ . This should work. [Here is the reference](http://stackoverflow.com/questions/10900401/jquery-ui-autocomplete-renderitem-seems-to-interfere-with-select-event). In short, the solution is that you should wrap rendered item with an anchor tag. Also use mentions (@) when talking to a specific user :)

Comment: @honktronic: Im glad it helped

Comment: In which of the scopes above?

Comment: Ah I see what you're saying. `this.select.bind(this)` is in a new object literal so `this` won't refer to the right object. Got it. ***EDIT (hit save too early)*** Unfortunately that doesn't fix the problem. I also tried using the `.on('autocompleteselect', callback)` approach and it didn't work either.

Comment: Actually that's not true. I didn't understand how `this` works. Being inside the object literal has no bearing on the value of `this` (which still refers to the new ThingSuggest being constructed).

Comment: Interesting Dhiraj. Does it really work for you? 'Cause that link doesn't work for me. The 'selected' alert never fires. And keyboard control for autocomplete selection doesn't work either.

Comment: Oh. My. God. I'm dumb. Forthcoming selected answer will explain.

Comment: @DhirajBodicherla, thanks for the help!

Comment: what do you think `this` is in the current scope?

Comment: what's your question related to? `this.select.bind(this)` Is this a model binding question or is `ThingsSuggest` question?

Here is the accepted 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.

Here is another answer: 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

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 11, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:06/14/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><jquery-autocomplete>', 'Title': 'jQuery autocomplete select function not firing', 'ViewCount': 632, 'id': 30825966, 'user_AboutMe': '', 'user_AccountId': 2058610.0, 'user_DisplayName': 'honktronic', 'user_Reputation': 343.0, 'user_Views': 47.0, 'user_id': 1835752.0}}