goog.ui.ac.AutoComplete使用异常：仅Tab补全无候选列表显示

使用方式错误 #

你的Renderer初始化存在问题：

• Renderer构造函数的opt_parent参数是可选的父容器，不需要传入输入框元素。正确写法应为const renderer = new Renderer();，组件会自动创建候选列表元素并挂载到合适的位置（默认是body）。
• 目前的代码中，Renderer绑定了输入框作为父容器，可能导致列表元素被输入框的样式限制（比如overflow:hidden），无法正常显示。

遗漏必要CSS文件 #

这是候选列表不可见的核心原因：

• Closure Library的AutoComplete组件依赖官方自带的CSS来控制列表的显示逻辑，包括初始隐藏状态、匹配结果时的显示切换、绝对定位布局等。你当前引用的自定义autocomplete.css大概率缺少这些关键样式。
• 需要替换为Closure Library提供的autocomplete.css，确保包含.goog-autocomplete类的显示/隐藏规则，以及列表项的基础样式。

组件选择是否正确？ #

没有选错。goog.ui.ac.AutoComplete搭配ArrayMatcher、Renderer、InputHandler是官方推荐的基础用法。如果想简化代码，也可以使用goog.ui.ac.createSimpleAutoComplete快捷函数，它会自动完成组件的组合与绑定。

Bazel构建的影响 #

如果使用Bazel构建，可能存在以下问题：

1. CSS资源未正确打包：Bazel默认不会自动处理Closure Library的静态资源，需要在BUILD配置中添加资源依赖，确保autocomplete.css被复制到输出目录，并在HTML中正确引用。
2. 模块依赖缺失：需确保BUILD规则中包含了goog.ui.ac所有相关子模块的依赖，避免因部分代码未加载导致功能异常。
3. 代码压缩优化问题：若开启了摇树优化或代码压缩，可能误删了AutoComplete的显示触发逻辑，需检查构建规则是否保留了Closure Library的必要代码。

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