JQuery autocomplete and focal event

Question

Mornin 'everything

I'm having trouble playing jQuery UI autocomplete widget events. I want to add my own class to the parent <li> selected element. The generated markup looks like this:

 <li class="result"> <a><span></span></a> </li> 

When the object is in focus, jQuery adds the .ui-state-hover class to <a> How to add the .selected class to the parent <li> ? I am trying to do this from the focus event, but I do not know how to access the parent <li> . I looked at the source of the jQuery user interface and found where and how .ui-state-hover is applied, but it doesn't help.

Here is my autocomplete code.

 /** * Override the default behavior of autocomplete.data('autocomplete')._renderItem. * * @param ul _object_ The conventional ul container of the autocomplete list. * @param item _object_ The conventional object used to represent autocomplete data. * {value:'',label:'',desc:'',icon:''} */ var renderItemOverride = function (ul, item) { return $('<li class="result"></li>') .data("item.autocomplete", item) .append('<a><span class="name">' + item.label + '</span><span class="type"></span></a>') .appendTo(ul); }; $('#live_search').autocomplete({ source: function(request, response) { $.ajax({ url: "search.json", dataType: "json", cache: false, data: { term: request.term }, success: function(data ) { response($.map(data.contacts, function(item) { return { label: item.name || (iterm.firstname + item.lastname), value: item.name || (iterm.firstname + item.lastname), id: item._id } })); } }); }, appendTo: '.live_search_result_list', autoFocus: true, minLength: 2, focus: function(event, ui) { }, select: function(event, ui) { console.log("do a redirection"); } }).data('autocomplete')._renderItem = renderItemOverride; 

})

Can any ninja help?

Answer 1

What about:

 focus: function(event, ui) { $(".live_search_result_list li.result").removeClass("selected"); $("#ui-active-menuitem") .closest("li") .addClass("selected"); }, 

Then, to remove the selected class from any li when the menu loses mouse focus:

 $(".live_search_result_list ul").mouseleave(function() { $(this).children("li.result").removeClass("selected"); }); 

Here is a working example: http://jsfiddle.net/andrewwhitaker/4z3SQ/