jQuery UI自动完成:将css类添加到特定项目

Question

我正在使用Jquery UI的自动完成小部件,我正在通过回调中的描述获取要显示的项目.

我有一个用例,我需要提交一些我从服务器检索的项目与其他项目略有不同,以便用户理解这些项目之间存在差异.在我的例子中,一些项目是"个人的",有些是"全球性的".

我想通过向他们添加一个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及更高版本,则需要将代码更改为:ie".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;
};