JQuery UI Autocomplete

I'm not going to go deep into explaining how to use Autocomplete as the full documentation for a custom implementation can be found here and for the most part, it works.

The simple trick is to replace .autocomplete("instance") with .data("uiAutocomplete"), though depending on the version, you might have to use .data("ui-autocomplete") instead.

And that's it, simple enough, but it works. Just make sure to check that your code matches the array of objects that you're pulling the items from.

Full example below:

$(".autocomplete").autocomplete({
minLength: 0,
source: response.cities,
focus: function (event, ui) {
$(".autocomplete").val(ui.item.Label);
return false;
},
select: function (event, ui) {
$(".autocomplete").val(ui.item.Label);
return false;
}
}).data("uiAutocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.Label + "</a>")
.appendTo(ul);
};

By Luke Alderton at 9 Nov 2016, 07:08 AM

Tags: jQuery,JavaScript

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By dipbleds on Raspberry Pi - Bluetooth using Bluecove on Raspbian
12 Dec 2017, 21:29 PM
By Ich on Replacing the Xamarin Header/Navigation bar with a custom view/template
26 Nov 2017, 17:11 PM
By Ravi Motha on My experience at Umbraco UK Festival 2017
12 Dec 2017, 08:39 AM
By Borges on How to add a Xamarin Forms Loading Screen/Overlay
7 Nov 2017, 19:11 PM
By Rutul Mehta on Auto/Custom height on Xamarin Forms WebView for Android and iOS
4 Nov 2017, 03:15 AM
By Pablo on Xamarin MasterDetailPage has large margin/padding at top
26 Oct 2017, 15:31 PM
By faiza on Using MaryTTS or OpenMary in Java
22 Oct 2017, 12:54 PM
By Nietoperz on Using MaryTTS or OpenMary in Java
29 Sep 2017, 14:34 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development