We Keep Coding

Autocomplete Jquery UI doesn't display on iPad

I already read all the topics there about a similar issue but no real solution.
I just received an old project using Jquery UI, the form has a autocomplete input, it works perfectly on computers & phones, when you type 3 letters minimum, it suggests a list of words.
BUT when you try the same form on iPad, nothing happens. It suggests nothing.
Here the code (based on Jquery 2.2.3 & Jquery UI 1.11.4) :
HTML :
<input type="text" class="form-control autocomplete-multiple-theme-name ui-autocomplete-input" style="width: 100%;" autocomplete="off">
<input type="hidden" class="autocomplete-multiple-theme-id">
JS :
$(".autocomplete-multiple-theme-name").autocomplete({
minLength: 3,
source: 'themes/themes_json.php',
focus: function( event, ui ) {
$(this).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$(this).val( ui.item.label);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
};
Any idea to fix that ?
Thanks a lot everybody !

How to show autocomplete results in a specific div

I have an autocomplete field into my website. I just want to display the results inside a <div> tag instead the popup window that the plugin opens natively.
I searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the <div> with the results, not to put the popup over it.
This is my code :
$('#keyword').autocomplete(
{
source : '/Dev/pages/suivi_searchCompany.php',
select: function( event, ui )
{
console.log(ui.item.value);
loadHisto(ui.item.value);
loadInfosCompanies(ui.item.value);
loadInfosContact(ui.item.value)
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item )
{
console.log('test');
console.log(item);
console.log(ul);
return $( "<li>" )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};

An ugly but maybe sufficient solution might be to simply copy the content of the jquery-ui-generated div to your div and hide the default div:
jQuery:
$('#ui-id-1').bind('DOMSubtreeModified', function() {
$('#mycontainer').html($('#ui-id-1').html());
});
Empty custom div if input is empty:
$('#keyword').keyup(function() {
if($(this).val() == '') {
$('#mycontainer').html('');
}
});
CSS:
#ui-id-1 {
display: none !IMPORTANT;
}
JSFiddle
The ID of the default autocomplete div (#ui-id-1) might vary.
UPDATE:
To add one of the possible options from the dropdown to your textbox, add this:
$('#mycontainer').on('click', 'li', function() {
//add option to textbox
$('#keyword').val($(this).html());
//hide / clear dropdown
$('#mycontainer').html('');
});
See updated fiddle (which I tidied up a bit aswell).

Jquery Autocomplete Select TypeError: ui.item undefined

I am using jquery ui 1.10.3 and jquery 2.0.3.
I am trying to use the autocomplete function to change text of another text box on selecting an option from the suggested options from autocomplete.
Below is my code for the autocomplete function. I do get the results as needed but when I select an option from it, I get the TypeError: ui.item is undefined error.
<script language="javascript">
$(document).ready(function(){
$('#item_code').autocomplete({
source: "http://localhost/test/item/search_item",
minLength: 1,
select: function( event, ui ) {
$( "#item_description" ).val(ui.item.description );
return false;
}
}).data("ui-autocomplete" )._renderItemData = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.value + " - " + item.description + "</a>" )
.appendTo( ul );
};
});
</script>
I have scoured the net but I have come to a point where I find banging my head on the table.
Any help is greatly appreciated.

You should only need to change the one data property:
.data('item.autocomplete')
was deprecated in favour of
.data('ui-autocomplete-item')
As of jQuery UI 1.9 and removed as of jQuery UI 1.10
http://jqueryui.com/upgrade-guide/1.10/#removed-item-autocomplete-data-use-ui-autocomplete-item

I had a similar problem, but this was because the jQuery documentation now shows the usage for jQuery UI 1.10 and our website is still using jQuery UI 1.8.20.
This is what worked for me in the end.
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br><b>" + item.category + "</b></a>").appendTo(ul);
};

turns out I had to change
data("ui-autocomplete" )._renderItemData = function( ul, item ) {
and
.data( "item.autocomplete", item )
to
data("ui-autocomplete" )._renderItem = function( ul, item ) {
and
.data( "item.autocomplete-item", item )
hope this helps anyone who has migration issues with jQuery UI

jQuery Catcomplete with links

So, I'm trying to use HTML links in my catcomplete results, but jquery automatically transforms my html code into text, like on the image:
And my jQuery code is:
$( "#global-search" ).catcomplete({
delay: 0,
source: "globalsearch.php"
});
Please, dont say to me to use select: function( event, ui ) {
window.location.href = ui.item.value;
}, because it works only once when using ajax (I really don't know why, but it just doesn't work), and I asked some questions here yesterday asking how to fix it, and nobody helped me with it.
So, back with the html transformed into text, how can I add an html hyperlink to my results?
globalsearch.php:

Take a look at the Custom Data and Display example. You will see that they have replaced the _renderItem method with a custom one. You'll need to do the same thing to override how your items are displayed.
$('#global-search').data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>" )
.appendTo( ul );
};
Without seeing the output of your globalsearch.php I can't tell you exactly how to set it up, but basically you'd want to add a link attribute to your returned JSON and if the link exists, print the anchor with the link as its href.
How you handle the selection links vs outside links is left as an exercise to the OP.

From the autocomplete widget documentation
Independent of the variant you use, the label is always treated as
text. If you want the label to be treated as html you can use Scott
González' html extension. The demos all focus on different variations
of the source option - look for one that matches your use case, and
check out the code.
Scott González' html extension is https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js. I have also posted the code below.
/*
* jQuery UI Autocomplete HTML Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(function( $ ) {
var proto = $.ui.autocomplete.prototype,
initSource = proto._initSource;
function filter( array, term ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
});
}
$.extend( proto, {
_initSource: function() {
if ( this.options.html && $.isArray(this.options.source) ) {
this.source = function( request, response ) {
response( filter( this.options.source, request.term ) );
};
} else {
initSource.call( this );
}
},
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
.appendTo( ul );
}
});
})( jQuery );
EDIT try the code below while using the extension
$( "#global-search" ).catcomplete({
delay: 0,
html: true,
source: "globalsearch.php"
});

Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML

I'm using the following code to render my jQuery UI autocomplete items as HTML.
The items render correctly in the autocomplete control, but I keep getting this javascript error and can't move past it.
Firefox Could not convert JavaScript argument
Chrome Cannot set property '_renderItem' of undefined
donor.GetFriends(function (response) {
// setup message to friends search autocomplete
all_friends = [];
if (response) {
for (var i = 0; i < response.all.length - 1; i++) {
all_friends.push({
"label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
response.all[i].firstname + " " + response.all[i].lastname + "</strong>",
"value":response.all[i].firstname + " " + response.all[i].lastname,
"id":response.all[i].user_id});
}
}
$('#msg-to').autocomplete({
source:all_friends,
select:function (event, ui) {
// set the id of the user to send a message to
mail_message_to_id = ui.item.id;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
};
});
Not sure why it is throwing this error, or what I have to do to get past it...Any help is appreciated.

Since I just joined and can't comment on drcforbin's post above, I guess I have to add my own answer.
drcforbin is correct, although it is really a different problem than the one that the OP had. Anyone coming to this thread now is probably facing this issue due to the new version of jQuery UI just released. Certain naming conventions relating to autocomplete were deprecated in jQuery UI in v1.9 and have been completely removed in v1.10 (see http://jqueryui.com/upgrade-guide/1.10/#autocomplete).
What is confusing, however, is that they only mention the transition from the item.autocomplete data tag to ui-autocomplete-item, but the autocomplete data tag has also been renamed to ui-autocomplete. And it's even more confusing because the demos are still using the old syntax (and thus are broken).
The following is what needs to change in the _renderItem function for jQuery UI 1.10.0 in the Custom Data demo here: http://jqueryui.com/autocomplete/#custom-data
Original code:
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
Fixed code:
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
Note the changes for both autocomplete and item.autocomplete. I've verified that this works in my own projects.

I ran into the same problem...seems in later versions, it has to be .data("ui-autocomplete") instead of .data("autocomplete")

I know I'm late with my answer but if people in the future still don't get
.data( "ui-autocomplete-item", item )
to work then try this insted
$(document).ready(function(){
$('#search-id').autocomplete({
source:"search.php",
minLength:1,
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.append( "<a>" + item.value + ' | ' + item.label + "</a>" )
.appendTo(ul);
};
}
})
});
It worked for me and I was having problem with the login funktion.. I could not login because it said
Uncaught TypeError: Cannot set property '_renderItem' of undefined
Hope this does help someone :)
/kahin

I'm using jquery 1.10.2 and it work using:
.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};

And now, with jQuery-2.0.0, it's the name of your new module, but replacing the "." (dot) by the "-" (dash) :
jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
'_renderMenu': function (ul, items) {
// some work here
}
});
$this.catcomplete({
// options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Posting for the sake of any person who stumbles across this post.
This error will also manifest itself if you don't put the .autocomplete inside the document ready event.
The code below will fail:
<script type="text/javascript">
$('#msg-to').autocomplete({
source:all_friends,
select:function (event, ui) {
// set the id of the user to send a message to
mail_message_to_id = ui.item.id;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
};
</script>
while the code below will work:
<script type="text/javascript">
$(function(){
$('#msg-to').autocomplete({
source:all_friends,
select:function (event, ui) {
// set the id of the user to send a message to
mail_message_to_id = ui.item.id;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
};
});
</script>

Depending on the version of jquery ui you're using it will either be "autocomplete" or "ui-autocomplete", I made this update to the combobox plugin to fix the problem (~ln 78-85)
var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
autoComplete = input.data("autocomplete");
autoComplete._renderItem = function(ul, item) {
...