JQ UI 版本 1.8.6 中的 Jquery UI 自动完成 Ajax JSONP 返回被破坏答案

【问题标题】：Jquery UI Autocomplete Ajax JSONP return is broken in JQ UI Version 1.8.6JQ UI 版本 1.8.6 中的 Jquery UI 自动完成 Ajax JSONP 返回被破坏
【发布时间】：2011-02-24 08:27:18
【问题描述】：

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

更新：包含 JS Fiddle，使用数据中的 jquery ui 演示和 html

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

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

提前致谢

【问题讨论】：

标签： ajax jquery-ui jquery jsonp

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：