输入内容变化时元素显隐异常：动态搜索Ctrl+A清空后未恢复

AI 小北

2026-5-25

解决Ctrl+A+Backspace清空输入框后搜索列表不隐藏的问题

我来帮你搞定这个问题！你遇到的核心问题是keyup事件在处理Ctrl+A+Backspace这类快捷键组合时，无法及时准确捕获输入框内容的变化，导致判断逻辑失效。

问题原因

keyup事件是在按键抬起时触发的，但在全选删除的场景下，浏览器处理内容清空的时机可能略晚于keyup事件的触发，这时候你获取到的val()可能还不是空字符串，自然不会执行隐藏#search_list、显示#Main的逻辑。

更可靠的做法是使用input事件，它会在输入框内容实际发生变化时触发，不管是通过键盘输入、鼠标粘贴、快捷键删除还是其他操作，都能精准捕获内容的更新。

修改后的代码

$(document).ready(function(){
    // 用input事件替代keyup，覆盖所有内容变化场景
    $("#search").on('input', function(){
        // 用$(this)代替重复选择#search，提升代码效率
        var str = $(this).val().trim(); // 可选：trim处理空格，避免空空格误判
        
        if(str === '') {
            $("#Main").show();
            $("#search_list").hide();
        } else {
            $("#Main").hide();
            $("#search_list").show();
            // 这里可以添加你的搜索过滤逻辑，比如根据str渲染#search_list的内容
        }
    });
});