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

前端之家收集整理的这篇文章主要介绍了在jQuery UI 1.8中自定义自动完成显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试自定义 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中自动完成的模板?

解决方法

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

数据(“ui-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/

原文链接:https://www.f2er.com/jquery/179189.html

猜你在找的jQuery相关文章