如何在jQuery AJAX LoadSuppliers函数中将响应数据转为数组供autocomplete使用

在已提取response.data.result的成功回调中，按照以下步骤完成数组转换即可，全程兼容常见的接口返回结构异常场景：

第一步：做前置数据兜底校验 #

很多后端接口不会严格按照返回标准数组的格式输出，可能出现返回null、单个供应商对象、列表嵌套在result子字段里的情况，直接调用数组方法会触发类型错误，先做一层兼容提取：

// 从result中提取原始列表，兼容非数组返回的异常情况
const rawSupplierList = Array.isArray(result)
  ? result
  : (result?.list ?? (result ? [result] : []));

第二步：按照Autocomplete组件的要求转换数组结构 #

根据使用的具体autocomplete组件的参数要求，做对应的格式转换：

• 如果是支持纯字符串列表的组件（比如原生input datalist、bootstrap-typeahead），直接提取需要匹配的文本字段生成纯字符串数组：

  const autocompleteSource = rawSupplierList
    .map(item => item?.supplierName?.trim() ?? '')
    .filter(Boolean); // 过滤掉空的无效条目
  

• 如果是需要结构化对象的组件（比如jQuery UI Autocomplete），转换为带label/value字段的标准对象数组：

  const autocompleteSource = rawSupplierList
    .filter(item => item?.supplierId) // 过滤没有合法ID的无效数据
    .map(item => ({
      label: `${item.supplierName} - 联系人：${item.contactPerson ?? '无'}`, // 下拉展示的提示文本
      value: item.supplierName, // 选中后自动填充到输入框的内容
      supplierId: item.supplierId // 额外携带的业务字段，方便选中后做后续逻辑
    }));
  

常见踩坑提醒 #

• 不要把autocomplete的初始化逻辑放在$.ajax调用的外层，因为ajax是异步请求，外层代码执行时接口数据还没返回，会导致autocomplete拿不到可用的数据源
• 如果返回的供应商列表存在重复项，可以在转换数组时基于supplierId做一层去重，避免下拉选项重复
• 转换完成后可以先打console.log(autocompleteSource)确认数组结构，再传入autocomplete组件的source参数，减少联调排查成本

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