My select event doesn't work if I use _renderItem. If I comment out the last block of code where I call _renderItem, the select event works. When I use _renderItem, the select event doesn't fire at all.
var cache = {}, lastXhr;
$("#hifind-find").autocomplete({
source: function(request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
var posturl = '/hifind/jquery_ui/autocomplete/'+term;
lastXhr = $.post(posturl, function(data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
}, 'json');
},
delay: 300,
minLength: 1,
select: function(event, ui){
window.location = ui.item.dest;
}
});
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label )
.appendTo( ul );
};
I get the same result if I do something like...
$("#hifind-find").autocomplete(myConfig).data("autocomplete")._renderItem = renderItemFunction;
Either way, the select doesn't fire. _renderItem does what it's supposed to. It modifies the item and there are no errors, but it seems to break the select.
I believe this is because you are not wrapping the item in an anchor (a
) tag. Update your code to wrap the img
in an anchor and it'll work fine:
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a><img src="' + iconImgPath + item.flag + '-search.png" class="icon-autocomplete-bundle">' + item.label + '</a>')
.appendTo( ul );
};
Here are some examples that might help:
Example without including an a
tag in the markup generated in _renderItem
(select
is broken here like in your question): http://jsfiddle.net/MaLqe/
Example with an a
tag in the generated markup: http://jsfiddle.net/3zSMG/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With