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);
};

Published at

Tags: jQuery,JavaScript

Luke Alderton

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 DavidassuG on MVC forms in Umbraco
12 Jul 2018, 10:54 AM
By Luke on Setting up tables in SQLite with a primary key on a Xamarin Forms app
11 Jul 2018, 09:18 AM
By Travis on Setting up tables in SQLite with a primary key on a Xamarin Forms app
7 Jul 2018, 15:44 PM
By Luke on Auto/Custom height on Xamarin Forms WebView for Android and iOS
15 Jun 2018, 09:43 AM
By vikki on Auto/Custom height on Xamarin Forms WebView for Android and iOS
14 Jun 2018, 13:35 PM
By jimbo on JQuery Unobtrusive Validation for dynamically created elements
13 Jun 2018, 17:13 PM
By ScottKem on MVC forms in Umbraco
8 Jun 2018, 10:29 AM
By Alaa on java.lang.UnsatisfiedLinkError: no rxtxSerial in java.library.path
3 Jun 2018, 20:16 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development