JavaScript搜索功能异常及表单回车跳转问题咨询

问题原因分析 #

1. 未输入内容按回车跳转其他字段 #

你使用onchange事件触发searchProduct函数，但onchange仅在输入框内容改变且失去焦点时才会执行。页面加载完成后，用户未输入任何内容时，文本框的keydown事件尚未绑定，按下回车键会触发表单默认行为——跳转到下一个表单元素。

2. 搜索及回车阻止功能延迟生效 #

同样是onchange的触发时机问题：第一次输入内容时，searchProduct还未执行，input和keydown事件都未绑定。只有当输入内容后让输入框失去焦点（比如点击页面其他区域），onchange才会触发，事件才会被绑定。因此需要输入至少2个字符（或删除后重新输入），本质是要等onchange触发后，后续输入才会触发过滤逻辑。

另外，原代码中input事件处理函数里的if (event.key === "Enter")判断完全无效——input事件是内容变更时触发的，不会携带键盘按键信息，该代码可以直接删除。

修复方案 #

1. 调整事件绑定时机：移除输入框的onchange属性，改为页面加载完成后直接初始化所有搜索组件的事件绑定，确保页面一加载，事件就已生效。
2. 移除无效代码：删除input事件中无效的回车判断逻辑。
3. 优化过滤逻辑（可选）：原过滤逻辑本身没问题，配合绑定时机修复后即可正常触发空搜索词时显示全部选项的效果。

修复后的完整代码 #

JavaScript 部分

// 页面加载完成后初始化所有搜索组件
document.addEventListener('DOMContentLoaded', function() {
  // 初始化第一组搜索框与下拉框
  searchProduct('dropdowntype1','search1');
  // 若有其他组，依次添加初始化：
  // searchProduct('dropdowntype2','search2');
  // searchProduct('dropdowntype3','search3');
});

function searchProduct(dropDownName, searchInputText) {
  const dropdown = document.getElementById(dropDownName);
  const input = document.getElementById(searchInputText);

  // 阻止回车键默认行为
  input.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      input.focus();
    }
  });

  // 输入内容时实时过滤下拉选项
  input.addEventListener("input", () => {
    const searchTerm = input.value.toLowerCase();
    for (let i = 0; i < dropdown.options.length; i++) {
      const optionText = dropdown.options[i].textContent.toLowerCase();
      dropdown.options[i].style.display = optionText.includes(searchTerm) ? "" : "none";
    }
  });
}

HTML 部分

<input type="text" class="form-control rounded-0 border-0 border-bottom border-bottom-2 border-dark w-50" id="search1" placeholder="search">
<select asp-for="Related1" class="custom-select mt-3 w-50" id="dropdowntype1" name="Related1">
  <option> select one option </option>
  <option value="1">item 1</option>
  <option value="2">product2</option>
  <option value="3">item 3</option>
</select>

验证效果 #

• 页面加载后，即使文本框为空，按下回车键也不会跳转，焦点会保持在当前输入框。
• 输入任意字符时，下拉框会实时过滤选项，无需等待输入框失去焦点。

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