jquery ui autocomplete _renderItem seems to interfere with select event -
my select event doesn't work if use _renderitem. if comment out last block of code call _renderitem, select event works. when use _renderitem, select event doesn't fire @ 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 same result if like...
$("#hifind-find").autocomplete(myconfig).data("autocomplete")._renderitem = renderitemfunction; either way, select doesn't fire. _renderitem it's supposed to. modifies item , there no errors, seems break select.
i believe because not wrapping item in anchor (a) tag. update code wrap img in anchor , 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 examples might help:
example without including
atag in markup generated in_renderitem(selectbroken here in question): http://jsfiddle.net/malqe/example with
atag in generated markup: http://jsfiddle.net/3zsmg/
Comments
Post a Comment