自定义 jQuery UI 1.8 中的自动完成显示

我正在尝试自定义 JQuery 1.8 中自动完成元素的外观。 我使用了来自的示例JQuery UI 网站 http://jqueryui.com/autocomplete/#custom-data

$('#term').autocomplete(
    {source:'index.php?/Ajax/SearchUsers', minLength: 3, delay: 300}
).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
           .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
           .appendTo( ul );
};

不幸的是，在 JQuery UI 1.8 中没有 ui-autocomplete 数据字段。在哪里可以修改 JQuery UI 1.8 中自动完成的模板？

jQuery UI 站点中的示例基于 jQuery UI 1.10，jQuery UI 1.8 有点不同，因此您必须更改代码才能使其正常工作。

主要区别如下：

.data("autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br>" + item.desc + "</a>")
            .appendTo(ul);

The data("ui-autocomplete")必须是data("autocomplete")你必须设置data属性将您的附加信息添加到自动完成中。

Code:

$("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function (event, ui) {
        $("#project").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $("#project").val(ui.item.label);
        $("#project-id").val(ui.item.value);
        $("#project-description").html(ui.item.desc);
        $("#project-icon").attr("src", "images/" + ui.item.icon);

        return false;
    }
})
    .data("autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
};

Demo: http://jsfiddle.net/IrvinDominin/zvGKw/ http://jsfiddle.net/IrvinDominin/zvGKw/