求助：实现无匹配地址时自动关闭AutoSuggestion Box

你的问题核心是：当API返回无匹配地址时，没有将自定义建议框切换回隐藏状态，加上keyup事件里直接强制激活了建议框，导致空白框一直显示。以下是具体修复方案：

1. 修复sendLookupRequest函数逻辑 #

当前代码只处理了有建议结果的情况，完全忽略了无结果的场景。需要在请求返回后，根据data.suggestions的长度判断是否显示建议框：

async function sendLookupRequest(searchValue) {
  // 补充你之前省略的参数构建逻辑（比如API密钥等）
  const params = new URLSearchParams({
    key: "你的Smarty API密钥",
    prefix: searchValue,
    // 其他必要参数，比如country等
  });

  const request = await fetch(
    `https://us-autocomplete-pro.api.smarty.com/lookup?${params}`
  );
  const data = await request.json();

  if (data?.suggestions?.length > 0) {
    // 有匹配结果：渲染建议并显示框
    formatSuggestions(data.suggestions);
    suggestionElement.classList.remove("inactive");
    suggestionElement.classList.add("active");
  } else {
    // 无匹配结果：清空内容并隐藏框
    suggestionElement.innerHTML = "";
    suggestionElement.classList.remove("active");
    suggestionElement.classList.add("inactive");
  }
}

2. 调整keyup事件的激活逻辑 #

原来的keyup事件里，不管后续API返回什么结果，先把建议框设为active，这会导致无结果时框依然保持激活状态。修改后去掉这部分强制激活的代码，交给请求返回后处理：

addressElement.addEventListener("keyup", (e) => {
  const searchValue = e.target.value.trim(); // 处理输入空格的情况
  suggestionElement.innerHTML = "";

  if (!searchValue) {
    suggestionElement.classList.remove("active");
    suggestionElement.classList.add("inactive");
    return;
  }

  // 不再直接激活建议框，由API请求结果决定显示状态
  sendLookupRequest(searchValue);
});

关于autocomplete="off"的说明 #

这个属性是用来禁用浏览器原生自动填充的，和你自定义的建议框无关，所以它无效不影响当前问题的解决，不用再纠结这个属性。

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