jQuery UI autocomplete: add a css class to specific items

Question

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

        });

Andrew Whitaker · Accepted Answer · 2011-02-19 20:42:48Z

22

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/

answered Feb 19, 2011 at 20:42

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hans Westerbeek Over a year ago

this is essentially the same approach as described on github.com/scottgonzalez/jquery-ui-extensions/blob/master/…. I suppose it's the way to go :) Thanks!

Nathan Noble · Accepted Answer · 2013-09-15 13:48:48Z

8

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

answered Sep 15, 2013 at 13:48

Nathan Noble

8267 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery UI autocomplete: add a css class to specific items

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related