Question

我试图在JQuery 1.8中自定义自动完成元素的外观。我使用了JQuery UI website

中的示例

$('#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中自动完成的模板？

Answer 1

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

data("ui-autocomplete")必须为data("autocomplete")，您必须设置data属性才能将其他信息添加到自动填充中。

代码：

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

演示：http://jsfiddle.net/IrvinDominin/zvGKw/

Answer 2

我不得不制作一个利用自动填充的插件/小部件并遇到同样的问题。我调查了$（...）。data（），其中有些事实表明不同版本的jQuery UI使用不同的密钥在.data（）中存储数据。

根据1.9升级指南（http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys）

自动整理现在使用ui-autocomplete-item而不是item.autocomplete ...其中一些纯粹是内部的，有些对用户很有用。对用户有用的那些，特别是小部件实例和自动完成项，仍然支持旧名称，但现在已弃用。

因此，当我必须“覆盖”_renderItem-extensionpoint时，就UI版本而言，这就是我所做的：

if ($input.data("autocomplete") !== undefined) {
    $input.data("autocomplete")._renderItem = options._renderItem;
} else ($input.data("ui-autocomplete") !== undefined) {
    $input.data("ui-autocomplete")._renderItem = options._renderItem;
} else {
    // fail fast, fail here!
}

这与我可以进行特征检测非常接近。

Answer 3

在open函数中，您可以使用css修改建议的外观，如下所示：

open: function() {
    $('.ui-autocomplete').width('auto');
    $('.ui-widget-content').css('background', '#E1F7DE');
    $('.ui-menu-item a').removeClass('customClass');
}

所以在你的情况下它应该是这样的

$('#term').autocomplete(
    {
        source:'index.php?/Ajax/SearchUsers', 
        minLength: 3, 
        delay: 300,
        open: function() {
            $('.ui-autocomplete').width('auto');
            $('.ui-widget-content').css('background', '#E1F7DE');
            $('.ui-menu-item a').removeClass('ui-corner-all');
        }

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

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

3 个答案: