I am using Jquery UI's autocomplete widget and I am fetching the items to display through a callback as described in the reference.
I have a use-case where I need to present some of the items that I retrieve from the server slightly differently than others, so that the user understands there is a difference between these items. In my case, some of the items are 'personal', and some are 'global'.
I would like to let the 'personal' items stand out by adding a CSS class to them so that they have a slightly different background.
Is this possible? I have seen in the reference documentation that an addon exists that allows me to put arbitrary HTML in the 'items', but I feel that is suboptimal when all I really need to do is add a class (in some cases).
I think i would end up with something like this:
$("#myElement").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
var baseUrl = '/getItems.php'
$.getJSON(baseUrl, req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
var entry = new Object();
if (val.personal == true){
// add some css class somehow?
}
entry.id = val.id;
suggestions.push(entry);
});
//pass array to callback
add(suggestions);
});
},
});
Judging by the custom data and display sample, you'll need to tap into the _renderItem
method for autocomplete:
$("input").autocomplete({ ... }).data("autocomplete")
._renderItem = function(ul, item) {
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
if (item.personal) {
listItem.addClass("personal");
}
return listItem;
};
This method is called every time an item is rendered, making it possible to do checks on the item and conditionally apply a class (or do something more complicated).
Here's a working example (without AJAX, but the concept is the same): http://jsfiddle.net/andrewwhitaker/rMhVz/2/
If you are using JQuery UI 1.10 and above you need to change the code to below: i.e ".data("ui-autocomplete")"
$("input").autocomplete({ ... }).data("ui-autocomplete")
._renderItem = function(ul, item) {
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
if (item.personal) {
listItem.addClass("personal");
}
return listItem;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With