Автозаполнение пользовательского интерфейса jQuery: добавление класса CSS к определенным элементам

Question

Я использую виджет автозаполнения пользовательского интерфейса Jquery и извлекаю элементы для отображения через обратный вызов, как описано в ссылке.

У меня есть сценарий использования, в котором мне нужно представить некоторые элементы, которыеизвлекать данные с сервера несколько иначе, чем другие, так что пользователь понимает, что между этими элементами есть разница.В моем случае, некоторые элементы являются «личными», а некоторые «глобальными».

Я бы хотел выделить «личные» элементы, добавив к ним класс CSS, чтобы они имели немного другой фон.

Возможно ли это?В справочной документации я видел, что существует надстройка, которая позволяет мне помещать произвольный HTML в «элементы», но я считаю, что это неоптимально, когда все, что мне действительно нужно, это добавить класс (в некоторых случаях).

Я думаю, что в итоге получилось бы что-то вроде этого:

$("#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);
                });
            },

        });

Answer 1

Судя по пользовательским данным и образцу , вам нужно использовать метод _renderItem для автозаполнения:

$("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;
    };

Этот метод называется каждый раз, когда элемент отображается , что позволяет выполнять проверку элемента и условно применять класс (или делать что-то более сложное).

Вот рабочий пример (без AJAX, но концепция та же самая): http://jsfiddle.net/andrewwhitaker/rMhVz/2/

Answer 2

Если вы используете JQuery UI 1.10 и выше, вам нужно изменить код ниже: 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;
};