ASP.NET MVC中jQuery Ajax Autocomplete显示文本问题咨询

我帮你梳理下几个可能导致显示问题的关键点，以及对应的修正方案：

1. 修正dataType的拼写错误 #

你代码里写的datatype: "json"是小写的t，但jQuery的Ajax参数要求是驼峰式dataType（大写T）。拼写错误会导致jQuery无法正确识别返回的JSON格式，进而解析失败，下拉选项自然无法正常显示。

2. 确认后端返回的字段匹配 #

务必检查CreateF接口返回的JSON数据，确保每个item对象确实包含remetente（你要显示的文本）和ID（对应选项的值）字段。如果后端返回的字段名是大写开头（比如Remetente），那item.remetente会取不到值，显示就会为空。

3. 处理选中后输入框的显示逻辑 #

默认情况下，Autocomplete选中选项后，会把value（也就是你的item.ID）填充到输入框里。如果希望选中后显示的是remetente文本，需要添加select事件覆盖默认行为。

4. 增加错误排查回调 #

加上error回调能帮你快速定位Ajax请求是否失败（比如接口路径错误、后端报错），方便调试问题。

修正后的完整代码 #

$(document).ready(function () {
    $("#locais").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("CreateF")',
                dataType: "json", // 修正拼写错误
                data: { s_localidade: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.remetente, // 下拉列表显示的文本
                            value: item.ID // 选项对应的值
                        }
                    }))
                },
                error: function(xhr, status, error) {
                    // 调试用：打印错误信息，方便排查问题
                    console.log("请求错误:", status, error);
                    console.log("响应内容:", xhr.responseText);
                }
            })
        },
        // 选中选项时，让输入框显示label文本而非value
        select: function(event, ui) {
            event.preventDefault(); // 阻止默认填充value的行为
            $("#locais").val(ui.item.label);
            // 如果需要把ID存到隐藏域，可在此处处理
            // $("#hiddenIdField").val(ui.item.value);
        },
        // 聚焦选项时也显示label文本（可选优化）
        focus: function(event, ui) {
            event.preventDefault();
            $("#locais").val(ui.item.label);
        }
    });
});

额外调试建议 #

打开浏览器开发者工具（F12），切换到Network标签，查看CreateF接口的请求状态和返回的JSON结构，确认数据是否符合预期。

内容的提问来源于stack exchange，提问作者Asul