jQuery Autocomplete结果未显示在文本框下方问题求助

阿华AIGC实验室

2026-5-25

解决jQuery Autocomplete结果显示在页面左上角的问题

我碰到好几个开发者都遇到过这个坑，大概率是你漏了最关键的一步——没引入jQuery UI的样式文件！jQuery Autocomplete的下拉菜单定位、默认样式全靠官方的jQuery UI CSS撑着，只加载JS根本搞不定定位逻辑。

最直接的解决方案：补全jQuery UI CSS引用

你得确保页面里同时引入了匹配版本的jQuery UI CSS，比如和jQuery 3.3.1兼容的1.12.x版本：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

然后按顺序引入jQuery和jQuery UI的JS文件：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

做完这步，下拉菜单基本就能乖乖跑到文本框下方了。

如果还是不行？试试这些排查方向

检查CSS冲突：打开浏览器开发者工具，看看.ui-autocomplete这个类有没有被你的自定义CSS篡改了position、top、left属性——比如不小心设成position: fixed; top:0; left:0，那肯定会跑到左上角。把冲突的样式规则改掉就行。
手动强制定位：要是样式冲突一时找不到，你可以在初始化时用position选项手动指定下拉菜单的位置：

$(function() {
  $(".txtauto").autocomplete({
    source: 'php/getSuggerimenti.php',
    position: {
      my: "left bottom",
      at: "left top",
      of: ".txtauto"
    }
  });
});

这个配置是让下拉菜单的左下角对齐文本框的左上角，刚好卡在文本框正下方。