自定义jQuery UI 1.8中的自动完成显示 [英] Customize autocomplete display in jQuery UI 1.8

问题描述

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

I'm trying to customize the look of the autocomplete elements in JQuery 1.8. I used the example from the 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中自动完成的模板?

Unfortunately in JQuery UI 1.8 there is no ui-autocomplete data field. Where can I modify the template for the auto-complete in JQuery UI 1.8?

推荐答案

jQuery UI网站中的示例基于jQuery UI 1.10，而jQuery UI 1.8则有所不同，因此您必须更改代码以使其正常工作.

The example in the jQuery UI site is based on jQuery UI 1.10, jQuery UI 1.8 is a bit different so you have to change the code to let it works.

主要区别在这里:

.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属性，才能将其他信息添加到自动完成功能中.

The data("ui-autocomplete") must be data("autocomplete") and you have to set the data attribute to add your additional info to the autocomplete.

代码:

$("#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/

这篇关于自定义jQuery UI 1.8中的自动完成显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！