jQuery Autocomplete无法显示阿拉巴马等三州及城市联想问题排查

你的问题出在USStates数组的结构不一致：前三个州（阿拉巴马、阿拉斯加、亚利桑那）是包含name和cities属性的对象，而后面的州都是字符串。jQuery UI的autocomplete组件默认处理字符串数组时会直接显示内容，但处理对象数组时，需要对象包含label或value属性才能正确识别并渲染下拉选项，所以这三个州的对象因为缺少对应字段，无法在输入框的自动补全列表中显示。

1. 统一数组结构（推荐） #

把所有州都改成包含name和cities属性的对象，即使暂时没有城市列表的州也可以留空数组，结构统一后后续维护更方便：

var USStates = [
  {"name": "Alabama", "cities": ["Birmingham", "Huntsville", "Mobile", "Montgomery"]},
  {"name": "Alaska", "cities": ["Anchorage", "Fairbanks", "Juneau", "Sitka"]},
  {"name": "Arizona", "cities": ["Chandler", "Gilbert", "Glendale", "Mesa", "Phoenix", "Scottsdale", "Tempe", "Tucson"]},
  {"name": "Arkansas", "cities": []},
  {"name": "California", "cities": []},
  {"name": "Colorado", "cities": []},
  {"name": "Delaware", "cities": []},
  {"name": "Florida", "cities": []},
  {"name": "Georgia", "cities": []},
  {"name": "Hawaii", "cities": []},
  {"name": "Idaho", "cities": []},
  {"name": "Illinois", "cities": []},
  {"name": "Indiana", "cities": []},
  {"name": "Kansas", "cities": []},
  {"name": "Kentucky", "cities": []},
  {"name": "Louisiana", "cities": []},
  {"name": "Maine", "cities": []},
  {"name": "Maryland", "cities": []},
  {"name": "Massachusetts", "cities": []},
  {"name": "Michigan", "cities": []},
  {"name": "Minnesota", "cities": []},
  {"name": "Mississippi", "cities": []},
  {"name": "Missouri", "cities": []},
  {"name": "Montana", "cities": []},
  {"name": "Nebraska", "cities": []},
  {"name": "Nevada", "cities": []},
  {"name": "New Hampshire", "cities": []},
  {"name": "New Jersey", "cities": []},
  {"name": "New Mexico", "cities": []},
  {"name": "New York", "cities": []},
  {"name": "North Carolina", "cities": []},
  {"name": "North Dakota", "cities": []},
  {"name": "Ohio", "cities": []},
  {"name": "Oklahoma", "cities": []},
  {"name": "Oregon", "cities": []},
  {"name": "Pennsylvania", "cities": []},
  {"name": "Rhode Island", "cities": []},
  {"name": "South Carolina", "cities": []},
  {"name": "South Dakota", "cities": []},
  {"name": "Tennessee", "cities": []},
  {"name": "Texas", "cities": []},
  {"name": "Utah", "cities": []},
  {"name": "Vermont", "cities": []},
  {"name": "Virginia", "cities": []},
  {"name": "Washington", "cities": []},
  {"name": "West Virginia", "cities": []},
  {"name": "Wisconsin", "cities": []},
  {"name": "Wyoming", "cities": []}
];

接着修改autocomplete配置，指定label和value字段为name，同时优化城市补全的逻辑：

$("#USstate").autocomplete({
  source: USStates,
  // 聚焦时显示州名
  focus: function(event, ui) {
    $("#USstate").val(ui.item.name);
    return false;
  },
  select: function(event, ui) {
    $("#USstate").val(ui.item.name);
    // 根据选中的州设置城市自动补全
    if (ui.item.cities.length > 0) {
      $("#city").autocomplete({
        source: ui.item.cities
      });
    } else {
      // 无城市列表时清空输入框并销毁补全功能
      $("#city").val("").autocomplete("destroy");
    }
    return false;
  },
  // 统一转换下拉选项格式
  response: function(event, ui) {
    ui.content = ui.content.map(function(item) {
      return {
        label: item.name,
        value: item.name,
        cities: item.cities
      };
    });
  }
});

2. 适配现有混合结构（不推荐，结构混乱易维护） #

如果不想修改数组结构，可以通过自定义source函数处理字符串和对象两种类型：

$("#USstate").autocomplete({
  source: function(request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    // 过滤匹配的结果
    var results = $.grep(USStates, function(item) {
      var itemName = typeof item === "object" ? item.name : item;
      return matcher.test(itemName);
    });
    // 统一转换成标准格式的对象
    response($.map(results, function(item) {
      var name = typeof item === "object" ? item.name : item;
      return {
        label: name,
        value: name,
        cities: typeof item === "object" ? item.cities : []
      };
    }));
  },
  select: function(event, ui) {
    if (ui.item.cities.length > 0) {
      $("#city").autocomplete({
        source: ui.item.cities
      });
    } else {
      $("#city").val("").autocomplete("destroy");
    }
  }
});

内容的提问来源于stack exchange，提问作者TSCAmerica.com