如何限制JS生成的autocomplete-item列表长度或设置滚动容器？

针对你用W3Schools自动补全代码遇到的列表过长问题，提供两种实用解决方案，可单独或结合使用：

1. 限制自动补全结果数量 #

在生成匹配结果的循环逻辑中添加计数器，达到指定数量后停止创建新的autocomplete-item。修改核心JS代码如下：

function autocomplete(inp, arr) {
  // 保留原有其他函数（addActive、closeAllLists等）不变
  
  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) { return false;}
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);
    
    // 新增计数器控制显示数量
    var displayCount = 0;
    var maxDisplay = 10; // 自定义最多显示的结果数，比如10个
    
    for (i = 0; i < arr.length; i++) {
      if (displayCount >= maxDisplay) break; // 达到上限就终止循环
      if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
        b = document.createElement("DIV");
        b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
        b.innerHTML += arr[i].substr(val.length);
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        b.addEventListener("click", function(e) {
          inp.value = this.getElementsByTagName("input")[0].value;
          closeAllLists();
        });
        a.appendChild(b);
        displayCount++;
      }
    }
  });
  
  // 保留原有键盘事件监听等代码不变
}

2. 设置列表容器固定高度并允许滚动 #

通过CSS给自动补全列表容器添加最大高度和滚动属性，即使结果多也不会撑满屏幕：

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  /* 新增滚动相关样式 */
  max-height: 300px; /* 自定义容器最大高度 */
  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
}

建议同时使用两种方案：先限制结果数量减少渲染压力，再通过滚动兜底处理极端情况，兼顾性能和体验。

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