如何将JSON对象写入jQuery Autocomplete？返回数据无法渲染至页面

阿华AIGC实验室

2026-5-14

解决jQuery UI Autocomplete无法渲染AJAX返回数据的问题

嘿，我一眼就看到了问题所在——你对返回的JSON结构处理错了，咱们来一步步搞定它：

核心问题：JSON结构不匹配

你在success回调里写了$.map(data.Search, ...)，但从你给出的返回结果来看，接口直接返回的是一个纯数组，根本没有Search这个顶层属性！这就导致data.Search是undefined，最终生成的transformed是空数组，Autocomplete自然没法渲染出下拉选项。

修正后的完整代码

只需要把data.Search改成直接用data就行，下面是修正版：

$(document).ready(function() { 
  $("#autocomplete").autocomplete({ 
    source: function(request, response) { 
      $.ajax({ 
        method: "GET", 
        dataType: "jsonp", 
        url: "https://www.blalba/?term=" + request.term, 
        success: function(data) { 
          // 直接遍历接口返回的数组，而不是data.Search
          var transformed = $.map(data, function(el) { 
            return { label: el.airport, id: el.city }; 
          }); 
          response(transformed); 
        }, 
        error: function() { 
          response([]); 
        } 
      }); 
    } 
  }); 
});

额外优化建议

过滤空条目：返回的数组里有一条airport字段为空的数据，你可以加个判断过滤掉，避免出现空的下拉选项：

var transformed = $.map(data, function(el) { 
  if (el.airport && el.airport.trim()) {
    return { label: el.airport, id: el.city }; 
  }
});

确认JSONP有效性：要确保接口真的支持JSONP格式——也就是返回的内容是被回调函数包裹的（比如jQuery12345([...你的数组内容...])）。如果接口返回的是纯JSON，用dataType: "jsonp"会触发错误，这时候如果是跨域请求，需要后端配置CORS，或者改用支持CORS的请求方式。
检查URL正确性：确认https://www.blalba/?term=这个地址是有效的，避免拼写错误导致请求失败。