jQuery的querySelectorAll失效？导航栏实时输入筛选功能异常

我帮你排查了这段代码里的几个关键问题，咱们一个个拆解来看：

• 事件选型不合适：你用了keydown事件，但这个事件触发时，输入框的内容还没完成更新（按键按下但字符还没写入输入框），导致筛选逻辑拿不到最新的输入值。建议换成input事件（能兼容所有输入场景，包括粘贴、输入法输入）或者keyup事件。
• DOM元素与jQuery方法混用报错：div.querySelectorAll("li a")返回的是原生DOM元素集合，你直接调用jQuery的.html()方法会报错。原生元素应该用.textContent获取文本，或者把它转换成jQuery对象再操作。
• 未声明变量引发隐患：代码里的div变量没有用var/let/const声明，会变成全局变量，可能引发意外的变量冲突。
• 文本匹配的小细节：用原生textContent比html()更适合做文本筛选，能避免HTML标签干扰匹配结果。

修正后的可用代码 #

$("#gameSearch").on('input', function(e) { 
  const input = $(this); 
  const filter = input.val().toUpperCase(); 
  const $dropdown = $('#gamesDropdown'); 
  const $links = $dropdown.find("li a"); // 用jQuery方法直接获取jQuery对象集合
  
  $links.each(function() {
    const itemText = $(this).text().toUpperCase();
    $(this).toggle(itemText.indexOf(filter) > -1);
  });
});

代码说明 #

1. 改用input事件：覆盖所有输入操作场景，包括键盘输入、鼠标粘贴、输入法候选词选择等，比keyup更全面可靠。
2. 用jQuery的find()方法：直接得到jQuery对象集合，后续调用.text()、.toggle()等方法更顺畅。
3. 使用.toggle()简化逻辑：参数为true时显示元素，false时隐藏，比手动设置style.display更简洁易读。
4. 用const声明变量：避免全局变量污染，代码逻辑更严谨。

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