JQuery Ajax Autocomplete无结果显示问题求助

嘿，我来帮你搞定这个问题！你遇到的Autocomplete下拉框有边框但无实际选项的情况，大概率是以下几个原因导致的，咱们一步步排查：

1. 先检查AJAX返回的JSON数据是否正确 #

打开浏览器开发者工具（按F12），切换到「Network」标签页，在输入框里输入关键词触发请求，查看getCustomer.php返回的内容：

• 确认返回的是有效的JSON数组，比如格式应该是：[{"c_name":"客户A"},{"c_name":"客户B"}]
• 检查每个对象里的字段名是否是c_name，别把字段名写错了（比如写成name或者customer_name）
• 如果返回的是空数组、或者JSON格式错误，那下拉框肯定没内容

2. 修复Autocomplete的response代码语法错误 #

你的代码里value:...这部分明显没写完啊！jQuery Autocomplete要求每个返回的选项对象必须包含label（显示在下拉框的文字）和value（选中后填充到输入框的值，或者你需要的其他数据），省略号会导致语法错误，浏览器控制台肯定会报错。

修正后的response部分应该是这样的：

response($.map(json, function (item) {
  return {
    label: item.c_name, // 下拉框显示的文字
    value: item.c_name  // 选中后输入框填充的值，也可以换成item.c_id之类的字段
  };
}));

3. 排查CSS样式问题 #

有时候选项其实已经生成了，但因为jQuery UI的默认样式没加载，或者被你的自定义CSS覆盖，导致文字颜色和背景色一致（比如白色文字在白色背景上），看起来像空白。

你可以打开开发者工具的「Elements」标签，找到下拉框的<li>元素，看看里面是否有文字，以及文字的颜色、背景色是否正常。如果是样式问题，手动添加基础样式即可：

.ui-autocomplete {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}
.ui-autocomplete li {
  padding: 8px 12px;
  cursor: pointer;
}
.ui-autocomplete li:hover {
  background-color: #f5f5f5;
}

4. 检查浏览器控制台的报错信息 #

按F12打开「Console」标签，看看有没有语法错误、AJAX请求错误（比如404找不到页面、500服务器错误），这些都会导致Autocomplete无法正常工作。比如如果getCustomer.php的路径写错了，AJAX请求失败，自然没有数据返回。

修正后的完整代码 #

这里给你一份加了错误处理和数据校验的完整代码，方便你排查问题：

<script type="text/javascript">
// Customer 自动补全
$('input[name=\'customer\']').autocomplete({
  delay: 500,
  source: function (request, response) {
    $.ajax({
      url: 'getCustomer.php?filter_name=' + encodeURIComponent(request.term),
      dataType: 'json',
      success: function (json) {
        // 校验返回的是否是数组，不是的话返回空数组
        if (!$.isArray(json)) {
          console.warn('返回的不是有效数组');
          response([]);
          return;
        }
        // 映射数据，过滤掉没有c_name的项
        response($.map(json, function (item) {
          if (!item.c_name) {
            return null;
          }
          return {
            label: item.c_name,
            value: item.c_name
          };
        }));
      },
      // 添加AJAX错误处理，方便排查问题
      error: function(xhr, status, error) {
        console.error('AJAX请求失败:', error);
        response([]);
      }
    });
  }
});
</script>

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