jQuery Autocomplete下拉窗口高度设置异常问题及TS代码求助

我来帮你搞定这个下拉高度不对的问题～ 通常jQuery UI Autocomplete的下拉菜单高度异常，要么是默认样式没做高度限制，要么是被页面其他CSS干扰了，给你两个靠谱的解决方案：

方案一：直接用CSS固定高度（最简单） #

jQuery Autocomplete的下拉菜单会自动带上ui-autocomplete类，你可以直接写CSS来控制它的高度和滚动行为：

.ui-autocomplete {
  max-height: 250px; /* 按需调整数值，比如200/300px都可以 */
  overflow-y: auto; /* 内容超过高度时显示垂直滚动条 */
  overflow-x: hidden; /* 禁止水平滚动，避免布局错乱 */
}

这种方式全局生效，所有Autocomplete下拉都会应用这个样式，适合需要统一风格的场景。

方案二：在初始化时通过配置动态设置（针对单个字段） #

如果你只想给特定的airport_field设置高度，可以在Autocomplete的配置里添加open事件回调，每次下拉菜单打开时调整它的样式：
修改你的TypeScript代码，在autocomplete({ ... })的配置对象里补充如下内容：

export module Autocomplete {
 export function load_autocomplete_fields(): void {
  // 注意：这里选择器可能有误，应该是.airport_field（类选择器）或#airport_field（ID选择器）
  $(".airport_field").each(function() {
   $(this)
   .autocomplete( {
    delay: 10,
    minLength: 0,
    // 添加open回调设置下拉高度
    open: function() {
      $(this).autocomplete("widget").css({
        "max-height": "250px",
        "overflow-y": "auto",
        "overflow-x": "hidden"
      });
    },
    source(request, response) {
     $(this.element[0]).attr("data-req-term", request.term);
     $.ajax({
      url: $(this.element[0]).attr("data-source"),
      dataType: "json",
      data: { term: request.term },
      success(data) {
       const results = [];
       $.map(data.cities, function(value, key) {
        // 你的结果处理逻辑继续
       });
       // 别忘了调用response返回处理后的结果！
       response(results);
      }
     });
    }
   });
  });
 }
}

另外提个小细节：你的选择器$("airport_field")看起来不太规范，应该是类选择器$(".airport_field")或者ID选择器$("#airport_field")，不然可能找不到对应的DOM元素哦～

额外排查点 #

如果还是有问题，检查一下页面里的其他CSS有没有覆盖ui-autocomplete的样式，比如有没有设置height: auto !important这类强制样式，需要调整样式优先级或者针对性覆盖。

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