JavaScript动态创建表单的搜索功能输入时搜索栏消失问题求解

问题出在searchNames的逻辑设计：

• 你用document.getElementsByTagName("div")获取了页面上所有div元素，包含包裹搜索栏的父容器parentDiv。当判断逻辑命中隐藏条件时，父容器会被直接隐藏，自然看不到搜索栏。
• 单行动态生成的div里有4个输入框，你现在的逻辑是遍历每个输入框都给父div设置一次显示/隐藏，后一个输入框的判断结果会覆盖前一个的，逻辑完全错误。

function searchNames() {
    var input = document.getElementById("search");
    var filter = input.value.toUpperCase();
    // 只选中动态生成的带divs类的行元素，不碰父容器
    var rowDivs = document.querySelectorAll(".divs");
    for(var i = 0; i < rowDivs.length; i++) {
        var currentDiv = rowDivs[i];
        var inputTags = currentDiv.getElementsByTagName("input");
        // 先默认当前行隐藏
        var showDiv = false;
        for (var j = 0; j < inputTags.length; j++) {
            var inputTag = inputTags[j];
            var upperText = inputTag.value.toUpperCase();
            if(upperText.indexOf(filter) > -1) {
                // 只要有一个输入框匹配，就标记为显示，跳出循环
                showDiv = true;
                break;
            }
        }
        // 统一设置当前行的显示状态
        currentDiv.style.display = showDiv ? '' : 'none';
    }
}

• 替换div选择器，只选你动态生成的带divs类的行div，完全不会操作包裹搜索栏的父容器，彻底解决搜索栏消失的问题
• 优化匹配逻辑：每行先默认标记为隐藏，遍历该行所有输入框，只要有任意一个匹配搜索关键词就标记为显示，最后统一设置行的显示状态，不会出现判断结果被覆盖的问题。
• 天然支持搜索框为空时显示所有行的需求，无需额外判断。

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