Question

我编写了以下代码来自定义jquery的自动完成插件。

var NOID = -1;
var selectedRoleID = NOID;
$('#roles').autocomplete({
    source: function(request, response){
        $.ajax({
            url: '/autocompleteRoles',
            dataType: 'json',
            data: {
                term: request.term,
                institutionID: selectedInstitutionID
            },
            success: response,
            error: function( jxhr, textStatus, errorThrown){
                alert(textStatus);
                            alert(errorThrown);
            }
        });
    },
    focus: function( event, ui ){
        $('#roles').val( ui.item.label );
        return false;
    }, 
    select: function( event, ui ){
        $('#roles').val( ui.item.label );
        selectedRoleID = ui.item.value;
        $('#roleID<%= id %>').val( ui.item.value );
        return false;
    }
});

观察get请求，当在角色输入中输入“St”时，我从服务器得到以下响应： [{"label":"Student","value":1}]

但是，出于某种原因，不会显示自动填充列表。

编辑：按照建议更改错误处理程序后，我收到以下警告： 1. parseError，和 2.错误：未调用jQuery17105143003379926085_1330435243607

Answer 1

我找到了答案。

数据类型需要是jsonp，服务器需要返回jsonp数据。我遵循了本教程：http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/

现在的回复是：jQuery17105373439881950617_1330436905475([{"label":"Student","value":1}])

自动完成选项如下所示：

$('#roles').autocomplete({
    source: function(request, response){
        $.ajax({
            url: '/autocompleteRoles',
            dataType: 'jsonp',
            data: {
                term: request.term,
                institutionID: selectedInstitutionID
            },
            success: function(data){
                response(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(textStatus);
                alert(errorThrown);
            }
        });

    },
    focus: function( event, ui ){
        $('#roles').val( ui.item.label );
        return false;
    }, 
    select: function( event, ui ){
        $('#roles<%= id %>').val( ui.item.label );
        selectedRoleID = ui.item.value;
        $('#roleID<%= id %>').val( ui.item.value );
        return false;
    }
});

Answer 2

首先除了检查路径之外，我还将错误处理程序更改为：

error:function(jqXHR, textStatus, errorThrown) {
    alert(textStatus);
    alert(errorThrown);
}

这至少应该识别呼出中的任何特定错误。

此外，尝试评论焦点并选择事件。

最后，尝试从此处复制演示，并确保它使用静态值列表：http://jqueryui.com/demos/autocomplete/（只需点击查看源代码）

jquery自动完成不显示自动完成列表

2 个答案: