jQuery UI -> autocomplete -> ON select -> ui item is undefined
Today I had the same problem with the undefined ui.item
property. After some debugging I found the solution. The jQuery UI team changed the Autocomplete with categories example code a little. When you view the examples source code you'll see:
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</script>
The line with that._renderItemData( ul, item );
used to be (in pre 1.9 versions) that._renderItem( ul, item );
. See also: bug #8560. But this isn't mentioned in the 1.9 Upgrade Guide.
So I changed my plugin to use the _renderItemData(...,...)
function and that solved the problem.
Hope this helps!
DS_web_developer
Updated on June 04, 2022Comments
-
DS_web_developer almost 2 years
I have an autocompleter on my page that fetches and displays the data correctly.... when it stops working properly is on select event....
$("#fld_search1").catcomplete({ delay: 50, minLength: 2, open: function(e, ui){ if(searching) return; //console.log($(this).data('catcomplete')); var acData = $(this).data('catcomplete'); var styledTerm = '<strong>%s</strong>'.replace('%s', acData.term); acData.menu .element .find('li a') .each(function() { var me = $(this); me.html( me.text().replace(acData.term, styledTerm) ); }); //return match.replace(new RegExp("("+keywords+")", "gi"),'<i>$1</i>'); }, select: function(event, ui) { var I = ui.item; top.console.log(ui); $("#fld_search1" ).catcomplete("close"); $('#fld_search1').val(I.name); window.location = '/podjetje/'+I.value+'.html'; //$('#frm_company_id').val(I.value); return false; }, source: function( request, response ) { search_term = request.term; if ( search_term in cache ) { response( cache[ tesearch_termrm ] ); return; } var suggest_url = "/companies/find_company.json"; $.ajax({ url: suggest_url, dataType: "json", type : "POST", data: { owner: request.term }, success: function( data ) { response( $.map( data, function( item ) { var alabel = item.label.replace( new RegExp('(' + $.ui.autocomplete.escapeRegex(request.term) + ')'), "<b>$1</b>" ); return { value: item.value, label: item.label, name: item.name, category: item.category } })); } }); } });
so it doesn't get the ui object...
if I do top.console.log(ui) I get an object with one property->item... that is undefined... so if I log the I value I get undefined... how is this possible?
this is in 1.9.1
if I change it and use 1.9.2 the menu ALWAYS closes on mouseover... if I use autoFocus, it doesn't even open!