如何在jQuery UI Autocomplete中添加酒店数据至自动补全结果？

开发者阿泽

2026-5-28

Add Hotel Data to jQuery UI Autocomplete Results

看起来你已经搭建好了城市和机场的自动补全逻辑，现在要把服务器返回的hotels字段加入结果列表其实很简单，只需要在AJAX成功回调的结果组装环节，新增对酒店数据的处理即可。

修改步骤：

定位到AJAX请求的success回调函数，找到你用来组装results数组的代码块
在现有处理data.airports的代码之后，添加遍历data.hotels并将每项推入结果数组的逻辑

修改后的完整`success`代码片段：

success(data) {
  console.dir(data);
  const results = [];
  // 处理城市及下属关联机场
  $.map(data.cities, function(value, key) {
    results.push(value);
    return $.map(value.airports, (value2, key2) => results.push(value2) );
  });
  // 处理独立机场数据
  $.map(data.airports, (value, key) => results.push(value));
  // 新增：处理酒店数据
  $.map(data.hotels, (value, key) => results.push(value));
  return response(results);
},

额外注意事项：

请确认服务器返回的hotels数组中，每个对象都包含fullname和id字段（你的select事件回调依赖这两个字段来更新输入框和ID元素）。如果酒店数据的字段名不一致（比如用hotel_name代替fullname），需要调整映射逻辑：
```
$.map(data.hotels, (value, key) => {
  results.push({
    id: value.hotel_id,
    fullname: value.hotel_name
  });
});
```
检查你的create_autocomplete_item函数是否能正确渲染酒店条目。如果需要给酒店添加特殊样式（比如图标、标签），可以给酒店对象增加一个标识字段（如type: 'hotel'），然后在渲染函数中做区分处理。