.NET Core 2 MVC中JQuery Autocomplete下拉无数据显示问题

我帮你分析下问题所在，你这情况其实是MVC控制器返回的JSON格式和JavaScript里的处理逻辑不匹配导致的——直接用本地数组正常说明Autocomplete组件本身没问题，问题出在AJAX响应的处理上。

核心问题：data.d的错误使用 #

你在JS的success回调里写了$.map(data.d, ...)，但ASP.NET MVC的Action返回string[]时，响应的JSON是纯数组格式（比如["Bent","Boon",...]），并没有外层的d属性——d是ASP.NET WebForms的WebService才会自动添加的包装字段，MVC里不存在这个结构，所以data.d是undefined，自然没法生成下拉选项。

修复步骤 #

1. 修改AJAX成功回调的处理逻辑

把data.d改成直接使用data，因为返回的响应本身就是我们需要的数组：

success: function(data) {
    response($.map(data, function (item) {
        return { value: item }
    }));
},

2. （可选）优化AJAX请求的参数传递

你现在的控制器方法没有接收pre参数，手动拼接JSON字符串容易出错，建议用JSON.stringify来生成请求体，同时后续如果要实现模糊查询，可以给控制器添加参数：

修改后的控制器方法（支持模糊过滤）：

using System.Linq;
using System.Collections.Generic;
using System.Web.Mvc;

public class HomeController : Controller
{
    public string[] GetPatientName(string pre) { 
        var names = new List<string> { "Bent","Boon","Book", "Al", "Cat", "Doe", "Ed", "Fox", "George" }; 
        
        // 如果输入为空则返回所有，否则按输入模糊匹配
        if (string.IsNullOrEmpty(pre))
            return names.ToArray();
        
        return names.Where(n => n.IndexOf(pre, StringComparison.OrdinalIgnoreCase) >= 0).ToArray(); 
    }
}

修改后的AJAX请求参数：

data: JSON.stringify({ pre: request.term }),

3. （可选）完善错误提示

可以在error回调里显示更详细的错误信息，方便排查：

error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert("请求出错：" + textStatus + " - " + errorThrown); 
}

验证方法 #

打开浏览器开发者工具（F12），切换到Network标签，触发Autocomplete请求后，查看该请求的响应内容，确认返回的是纯数组格式，而不是带d的对象，这样就能验证修复是否生效。

完整修改后的代码 #

JavaScript：

<script language="javascript" type="text/javascript"> 
$(function() { 
    $('#tags').autocomplete({ 
        source: function(request, response) { 
            $.ajax({ 
                url: "/Home/GetPatientName", 
                data: JSON.stringify({ pre: request.term }),
                dataType: "json", 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                success: function(data) { 
                    response($.map(data, function (item) { 
                        return { value: item } 
                    })); 
                }, 
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                    alert("请求出错：" + textStatus + " - " + errorThrown); 
                } 
            }); 
        }, 
        delay: 0 
    }); 
}); 
</script>

HTML（无需修改）：

<form> 
    <input id="tags" type="text" /> 
</form>

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