如何修改基础autocomplete函数实现前缀降级匹配与结果数量限制

核心实现逻辑 #

• 前缀降级匹配：从用户输入的完整长度开始匹配，无结果则逐位缩短前缀长度重新匹配，直到找到匹配结果或前缀长度为0时停止
• 结果数量限制：匹配完成后仅返回不超过results_limit配置值的结果，参数默认值设为10，未传参时也可正常运行

完整修改后代码 #

function autocomplete(inp, arr, results_limit = 10) {
  var currentFocus;
  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);

    // 降级匹配逻辑，获取符合要求的结果集
    let matchedItems = [];
    let prefixLength = val.length;
    // 从最长前缀开始尝试匹配，直到找到结果或者前缀长度为0
    while (prefixLength > 0 && matchedItems.length === 0) {
      const currentPrefix = val.substr(0, prefixLength).toUpperCase();
      matchedItems = arr.filter(item => {
        return item.substr(0, prefixLength).toUpperCase() === currentPrefix;
      });
      prefixLength--;
    }

    // 按配置限制结果数量
    matchedItems = matchedItems.slice(0, results_limit);

    // 渲染匹配结果
    for (i = 0; i < matchedItems.length; i++) {
      const targetItem = matchedItems[i];
      b = document.createElement("DIV");
      // 高亮当前实际生效的匹配前缀（降级后的前缀）
      const activePrefixLength = prefixLength + 1;
      b.innerHTML = "<strong>" + targetItem.substr(0, activePrefixLength) + "</strong>";
      b.innerHTML += targetItem.substr(activePrefixLength);
      b.innerHTML += "<input type='hidden' value='" + targetItem + "'>";
      b.addEventListener("click", function(e) {
        inp.value = this.getElementsByTagName("input")[0].value;
        closeAllLists();
      });
      a.appendChild(b);
    }
  });

  // 原有其余逻辑无需修改，包括closeAllLists函数定义、键盘上下键选择、点击外部关闭列表等原有逻辑保持不变即可
}

关键修改说明 #

1. 函数参数新增results_limit并设置默认值10，兼容不传该参数的使用场景
2. 新增前缀降级匹配逻辑：优先匹配用户完整输入，无结果时逐位缩短前缀重新匹配，只要最短1位前缀存在匹配就会返回结果
3. 对匹配结果做截断，最多展示results_limit条，避免下拉列表过长
4. 优化高亮逻辑：高亮实际生效的降级前缀，匹配用户的使用感知

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