JS可过滤联系人列表：过滤后分类分隔符未隐藏问题求助

嘿，这问题我之前也碰到过！你的过滤逻辑只处理了联系人项，没管那些字母分隔符，所以才会出现“空分隔符”挂在那儿的情况。不用重新加载列表，咱们直接修改filterContactList函数就能搞定。

核心思路 #

过滤完所有联系人项之后，逐个检查每个字母分隔符：看看它下面的联系人有没有至少一个是显示的，如果所有关联的联系人都被隐藏了，就把这个分隔符也藏起来；反之就显示它。

修改后的完整filterContactList函数 #

function filterContactList() {
    var input, filter, contactItems, dividers, i, txtValue;
    input = document.getElementById("address_search_input");
    filter = input.value.toUpperCase();
    contactItems = document.getElementsByClassName("rowDataAddress");
    dividers = document.getElementsByClassName("rowSectionAddress");

    // 如果输入为空，直接显示所有内容
    if (filter === '') {
        for (i = 0; i < contactItems.length; i++) {
            contactItems[i].style.display = "";
        }
        for (i = 0; i < dividers.length; i++) {
            dividers[i].style.display = "";
        }
        return;
    }

    // 先处理联系人项的显示/隐藏
    for (i = 0; i < contactItems.length; i++) {
        var item = contactItems[i];
        txtValue = item.textContent || item.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            item.style.display = "";
        } else {
            item.style.display = "none";
        }
    }

    // 处理分隔符的显示/隐藏
    for (let j = 0; j < dividers.length; j++) {
        const divider = dividers[j];
        let hasVisibleContact = false;
        // 遍历当前分隔符之后的元素，直到下一个分隔符或结束
        let nextElement = divider.nextElementSibling;
        while (nextElement && nextElement.className !== 'rowSectionAddress') {
            if (nextElement.style.display !== 'none') {
                hasVisibleContact = true;
                break; // 找到一个显示的就停止检查
            }
            nextElement = nextElement.nextElementSibling;
        }
        // 根据是否有可见联系人设置分隔符状态
        divider.style.display = hasVisibleContact ? "" : "none";
    }
}

代码说明 #

1. 输入为空的处理：当搜索框清空时，直接恢复所有联系人项和分隔符的显示状态，避免残留隐藏状态。
2. 联系人项过滤：这部分和你原来的逻辑一致，只是把变量名改得更清晰了。
3. 分隔符检查逻辑：
   • 遍历每个分隔符，从它的下一个元素开始查找，直到遇到下一个分隔符为止。
   • 只要找到一个未被隐藏的联系人项，就标记这个分隔符需要显示；如果所有关联项都被隐藏，就把分隔符也隐藏。

这样修改后，过滤时分隔符就会跟着它下面的联系人项一起显示或隐藏啦！

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