ASP.NET Core MVC自动补全结果显示异常问题求助

你遇到的问题根源是前端自动补全组件无法识别后端返回的(id, name)原始数据结构，导致直接渲染了对象文本而非下拉选项。以下是具体修复步骤：

1. 适配前端组件的数据格式（以jQuery UI Autocomplete为例） #

这类组件默认需要包含label（下拉显示文本）和value（选中后的值）的对象数组。修改你的AJAX调用代码，把后端返回的数据转换成组件需要的格式：

$("#targetInput").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/api/your-autocomplete-api",
      data: { keyword: request.term },
      success: function(rawData) {
        // 转换原始(id, name)数据为组件所需结构
        const formattedList = rawData.map(item => ({
          label: item.name, // 下拉列表显示的名称
          value: item.id    // 选中后要获取的ID值
        }));
        response(formattedList);
      }
    });
  },
  select: function(e, ui) {
    e.preventDefault(); // 阻止输入框自动替换为ID
    $("#targetInput").val(ui.item.label); // 输入框显示名称
    $("#hiddenIdField").val(ui.item.value); // 将ID存入隐藏域供后续使用
  }
});

2. 或直接在后端API返回适配格式 #

如果不想修改前端，可以在后端查询数据时直接返回符合组件要求的结构。比如ASP.NET Core的示例：

[HttpGet("api/autocomplete")]
public IActionResult GetAutoCompleteList(string keyword)
{
    var dbData = _db.YourTable
        .Where(x => x.Name.Contains(keyword))
        .Select(x => new { label = x.Name, value = x.Id })
        .ToList();
    return Json(dbData);
}

3. 其他组件的适配示例（如Select2） #

如果用的是Select2，调整数据映射逻辑：

$("#targetInput").select2({
  ajax: {
    url: "/api/your-autocomplete-api",
    dataType: "json",
    data: params => ({ keyword: params.term }),
    processResults: data => ({
      results: data.map(item => ({ id: item.id, text: item.name }))
    })
  },
  minimumInputLength: 1
});

关键排查点 #

• 打开浏览器开发者工具的Network标签，确认后端返回的JSON数据格式正确
• 确保没有直接将原始数据传给组件的source属性，必须先做格式转换
• 检查select事件的处理逻辑，确保选中后能正确获取ID并显示名称

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