jQuery UI Autocomplete中Ajax内Response函数无法正常工作问题

看了你的代码，我发现几个关键问题导致response函数无法正常工作，下面逐个拆解并给出修复方案：

核心问题分析 #

1. response函数调用方式错误：jQuery UI Autocomplete的response回调只接受一个参数——格式化后的选项数组，你现在传了原始数据data和转换函数两个参数，完全不符合API要求。
2. 拼写错误：item.FulltName里多了一个t，应该是item.FullName，这会导致下拉选项的标签无法正确获取值。
3. 代码截断：你的select回调函数没有写完，语法不完整也会影响整体功能。

修复后的完整代码 #

$("#city").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: 'index.php?secController=studentProfile&action=employeeSearch',
      dataType: "JSON",
      data: {
        searchCriteria: request.term
      },
      success: function(data) {
        console.log(data);
        // 先把后端返回的数据转换成Autocomplete要求的格式
        const formattedOptions = data.map(item => ({
          label: item.FullName, // 修正拼写错误
          value: item.id
        }));
        // 将格式化后的数组传给response
        response(formattedOptions);
      },
      // 建议新增错误处理，排查请求失败的情况
      error: function(xhr, status, error) {
        console.error("搜索请求失败:", error);
        response([]); // 请求失败时返回空数组，避免组件一直处于加载状态
      }
    });
  },
  minLength: 1,
  select: function(event, ui) {
    // 补全你的选中逻辑，示例如下：
    if (ui.item) {
      console.log("选中选项：", ui.item.label, "ID：", ui.item.value);
      // 如果不想用默认的value填充输入框，可以添加下面这行
      // event.preventDefault();
    }
  }
});

额外注意事项 #

• 确认后端返回的data是数组格式：如果后端返回的是嵌套对象（比如{list: [...]}），需要改成data.list.map(...)来获取正确的选项数组。
• 检查AJAX请求是否成功：打开浏览器控制台，查看Network标签页，确认请求的URL、参数是否正确，后端返回的JSON格式是否合法。

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