Question

我一直在使用下面的代码在我的表单上自动完成一段时间，但是在从1.8rc3将jquery ui更新到1.8.6之后，它已经打破了JSONP返回的格式。返回的数据不再是html格式，而是字符串。任何想法？

更新：包含JS Fiddle，在数据中使用jquery ui demo和html

 $("#companyname").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: turl,
                dataType: "jsonp",
                data: {
                    maxRows: 9,
                    name_startsWith: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: "<span class='ui-menu-item-title'>" + item.name.toLowerCase() + "</span><span class='ui-menu-item-subtitle'>" + item.address1.toLowerCase() + '&nbsp;' + item.post_code.toLowerCase() + '</span>',
                            value: item.name_id
                        }
                    }))
                }
            })
        },
        minLength: 3,
        delay: 50,
        select: function (event, ui) {
            LoadGivenCompany(ui.item.value);
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        },
        focus: function () { return false }
    });

alt text

提前致谢

Answer 1

我查看了1.8.6版自动完成的源代码，发现项目创建使用的是文本方法而不是html方法。他们建议在jQuery.ui中使用主题滚动来改变样式，通过改变css文件中的小部件特定类。请参阅Autocomplete#theming。

我要做的是找到他们在元素中推送文本的位置，并将方法调用更改回html并测试它。

Answer 2

在自动填充允许您格式化数据后使用.data（）结果

$(function() {
function log(message) {
    $("<div/>").text(message).prependTo("#log");
    $("#log").attr("scrollTop", 0);
}

$("#city").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function(data) {
                response($.map(data.geonames, function(item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name,
                        test: 'hahahah'
                    }
                }));
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
    },
    open: function() {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function() {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
})       
.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.test + "</a>" )
            .appendTo( ul );
    };
});

http://jsfiddle.net/blowsie/ejLPg/3

JQUI UI自动完成Ajax JSONP返回在JQ UI版本1.8.6中被破坏

2 个答案: