10

我正在尝试自定义 JQuery 1.8 中自动完成元素的外观。我使用了来自JQuery UI 网站的示例

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

4

3 回答 3

21

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/

于 2013-08-14T12:38:07.787 回答
9

我不得不制作一个利用自动完成功能的插件/小部件并遇到了同样的问题。我调查了 $(...).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!
}

这与我可以达到的特征检测一样接近。

于 2014-01-23T12:54:07.933 回答
2

在 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 );
};
于 2013-08-14T12:17:18.813 回答