JQueryUI 1.10.0 Autocompleter renderItem problems
Solution 1
Instead of
$('selector').data('ui-autocomplete')._renderItem = function (ul, item) { };
you should use
$('selector').data('uiAutocomplete')._renderItem = function (ul, item) { };
Solution 2
I found the solution!
Well, I'll share you my little experience. When I had this same issue, I listened to people talking about change "ui-autocomplete" to "uiAutocomplete" or just "autocomplete", but that's wrong.
The correct is really "ui-autocomplete", the solution of this issue isn't this. I solve my problem when I change my code from:
.data('ui-autocomplete')._renderItem = function (ul, item)
to:
.__renderItem = function(ul, item)
Try do that and tell me what's occur.
Solution 3
I had the same problem. You should use $('selector').data('autocomplete')._renderItem = function (ul, item) {...};
Or just open console and type something like this: $('div').autocomplete().data()
There you'll see the method you have to use. In my case it's just 'autocomlete'
user1214620
Updated on June 04, 2022Comments
-
user1214620 almost 2 years
I tried a solution regarding renaming 'autocomplete' to 'ui-autocomplete' (using JQueryUI 1.10.0, JQuery 1.8.3) and am still getting an error for:
TypeError: $(...).autocomplete(...).data(...) is undefined
} }).data('ui-autocomplete')._renderItem = function (ul, item) {
its defined in 1.10.0 but I need to override:
_renderItem: function( ul, item ) { return $( "<li>" ) .append( $( "<a>" ).text( item.label ) ) .appendTo( ul ); },
here is my whole code:
var ajaxCall_QuickSearchCompanyId; $('#QuickSearchCompanyId').autocomplete({ minLength: 2, delay: 300, source: function (request, response) { if (ajaxCall_QuickSearchCompanyId) { ajaxCall_QuickSearchCompanyId.abort(); } ajaxCall_QuickSearchCompanyId = $.ajax({ url: '/Advertiser/Autocompleter/CompaniesDetailed', dataType: 'json', data: { q: request.term }, success: function (data) { $('#QuickSearchCompanyId').removeClass('ui-autocomplete-loading'); response($.map(data, function (item) { return { label: item.ID, value: item.Name, subsidiaries: item.Subsidiaries, category: item.Category, url: (item.URL == null) ? '' : item.URL, parentName: item.ParentName, isReported: item.IsReported } })); } }); } }).data('ui-autocomplete')._renderItem = function (ul, item) { String.prototype.chunk = function (n) { var ret = []; for (var i = 0, len = this.length; i < len; i += n) { ret.push(this.substr(i, n)); } return ret; }; ul.attr('id', 'ul_QuickSearchCompanyId'); return $('<li></li>') .data('ui-autocomplete-item', item) .append("<a style='padding: 0px;'><div style='margin-bottom: 0px; width: 450px;'><table style='height: 100%; width: 450px; font-family: Calibri; font-size: 10pt;'><tr><td style='width: 280px; border-right: solid 1px Black; padding: 0px; color: " + ((item.isReported != true) ? 'Gray' : 'Black') + "; font-style: " + ((item.isReported != true) ? 'italic' : 'none') + ";'>" + ((item.parentName != '[[root]]') ? (item.parentName + ': ') : '') + item.value + "</td><td align='right' valign='top' style='width: 150px; padding: 0px; color: " + ((item.isReported != true) ? 'Gray' : 'Black') + "; font-style: " + ((item.isReported != true) ? 'italic' : 'none') + ";'>" + item.category + "<br /></td></tr></table></div></a>") .appendTo(ul); };
Any Ideas would be greatly appriciated.
-
user1214620 over 11 yearsjust tried this and it didn't work:
TypeError: $(...).autocomplete(...).data(...) is undefined [Break On This Error]
}).data('uiAutocomplete')._renderItem = function (ul, item) {
-
Andrew Whitaker over 11 years@user1214620: This should work: jsfiddle.net/XsskB/1. Are you sure you're using 1.10?
-
Asenar over 10 yearsyou saved my day ! That worked perfectly, and I just needed to add a little zIndex in my css because the autocomplete list where displaying under some elements
-
Paladini over 10 yearsWhy downvote? This works for me and I lost my time sharing knowledge for this? Why you downvoted without give me a feedback?
-
jondow almost 8 yearsYour suggestion to run the JS in the console was a great idea. Helped me figure my problem out.
-
Sanjay Gohil over 7 yearsThanks! i used ui-autocomplete instead of autocomplete This works for me