页面加载时空输入框未隐藏autoComplete-Box-id，如何修复？

问题：给id为originInput的输入框添加input事件监听器，期望输入框为空时隐藏autoComplete-Box-id元素，有内容时显示，但页面加载时输入框为空，该div却处于显示状态，判断输入值长度为0的方式未解决问题。

修复方案 #

核心问题在于页面初始化时没有执行一次状态判断，且CSS默认是显示该元素的。可以通过两种方式解决：

方式一：CSS默认隐藏元素

直接在CSS中给autoComplete-Box-id设置默认隐藏，页面加载时就不会显示，后续通过JS控制显示/隐藏：

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
  display: none; /* 默认隐藏 */
}

方式二：页面加载后手动执行一次判断逻辑

如果不想修改CSS，可以在JS中页面加载完成后，主动调用一次判断逻辑初始化元素状态，同时优化代码避免重复获取DOM元素：

let getOriginInput = document.getElementById("originInput");
let autoCompleteBox = document.getElementById("autoComplete-Box-id"); // 提前获取元素

// 封装判断逻辑函数
function toggleAutoCompleteBox() {
  autoCompleteBox.style.display = getOriginInput.value === "" ? "none" : "block";
}

// 页面加载时初始化状态
toggleAutoCompleteBox();

// 绑定input事件
getOriginInput.addEventListener("input", toggleAutoCompleteBox);

完整修改后代码 #

HTML（无需修改）

<span>
  <input id="originInput" style="width: 350px;" name="origin" type="text" placeholder="Origin">
</span>
<div id="autoComplete-Box-id"></div>
<br>
<br>
<br>
<br>
<br>
<span>
  <input style="width: 350px;" name="destination" type="text" placeholder="Destination">
</span>

CSS（方式一修改后）

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
  display: none;
}

JS（方式二修改后）

let getOriginInput = document.getElementById("originInput");
let autoCompleteBox = document.getElementById("autoComplete-Box-id");

function toggleAutoCompleteBox() {
  autoCompleteBox.style.display = getOriginInput.value === "" ? "none" : "block";
}

toggleAutoCompleteBox();
getOriginInput.addEventListener("input", toggleAutoCompleteBox);

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