Jquery 自动完成插件未显示成功响应

Jquery autocomplete plugin not showing success response

本文关键字：显示 成功 响应 插件 Jquery      更新时间：2023-09-26

我正在使用这样的jquery自动编译插件

$( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://www.abc.com/test.php",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        alert("hello");
                    }
                });
            },
            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" );
            }
        });

我没有收到任何关于成功的警报框。

火狐显示我得到这个作为回应

[{"label":"mark2","value":1},{"label":"abc1","value":20}]

它是否期望其他回报

鉴于您从中获取的示例工作正常，并且使用 jsfiddle 复制相同的示例按预期工作，您的示例不起作用的原因可能是您在页面的其他地方有一个 javascript 错误，该错误正在停止进一步的 javascript 执行。

另外，我复制了该示例，更改了仅在成功回调中放置alert - 这也很好用，但是您应该注意，jQueryUI 自动完成的文档指出：

在提供自定义源回调以处理请求期间的错误时，这一点很重要。即使遇到错误，也必须始终调用响应回调。这可确保小组件始终具有正确的状态。

并不是说这是你的错误，但值得注意的是！

编辑 我想到了一个想法，如果您的 ajax 调用实际上生成了服务器端错误 （http500），那么您将永远不会输入success回调，也永远不会收到警报。尝试向 ajax 调用添加错误回调，看看是否是这种情况：

$.ajax({
    url: "http://www.abc.com/test.php",
    dataType: "jsonp",
    data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
    },
    success: function( data ) {
        alert("hello");
    },
    error: function (xhr, textStatus, errorThrown){
        alert("error: " + errorThrown);
    }
});
相关文章：