javascript - 当用户在 javascript 中输入文本时过滤掉不匹配序列的单词

Question

我正在尝试制作一个名称列表，每次用户输入文本时，它应该过滤名称以仅显示与用户输入的文本匹配的名称。当用户单击清除按钮时，它应该清除输入并再次显示所有名称。

所以我制作了一个名称数组以显示在一个 div 中。问题是它第一次遍历所有名称时，它会完美过滤(在每个 keyup 事件中，它循环遍历所有名称以检查...)。第二次循环(用户输入的第二个字母)时，它不再删除单词...有人可以帮我解决这个问题吗？

此外，当我点击清除按钮时，它会清除屏幕并放回数组中的所有单词，但它不再起作用了——它不会删除单词...

这是我在 javascript 文件中的代码:

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"]
window.addEventListener("load", CreateWords);
function CreateWords() {
    for (var i = 0; i < words.length; i++) {
        newP = document.createElement('p');
        newP.appendChild(document.createTextNode(words[i]));
        var div = document.getElementById("wordDiv");
        div.appendChild(newP);
        newP.style.fontSize = 20;
        newP.id = words[i];
    }
}

var lettersTyped = document.getElementById("userInput");
lettersTyped.addEventListener("keyup", filterWords);
var clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", ClearScreen);

function filterWords() {
    for (var i = 0; i < words.length; i++) {
        var val = words[i].toLocaleLowerCase().search(lettersTyped.value);

        if (val == -1) {
            var child = document.getElementById(words[i]);
            child.parentNode.removeChild(child);
        }
    }
}

function ClearScreen() {
    for (var i = 0; i < words.length; i++) {
        newP = document.createElement('p');
        newP.appendChild(document.createTextNode(words[i]));
        var div = document.getElementById("wordDiv");
        div.appendChild(newP);
        newP.style.fontSize = 20;
        newP.id = words[i];
    }
    lettersTyped.value = " ";
}

Answer 1

这是一个相当简单的修复。

1. 我摆脱了 CreateWords，而是使用了 ClearScreen。
2. 我将 wordDiv 的 innerHTML 设置为 ClearScreen 顶部的 "" 以避免看到重复的条目. (您的代码总是会再次添加所有单词，即使有些单词已经存在。)
3. 我用 if (child) 保护了 child.parentNode，这样它就不会在单词已经被过滤掉时中断。
4. 我将 lettersTyped.value 设置为 "" 而不是 ""。 (空间可能会破坏你的东西。)
5. 我使用了 indexOf 而不是 search，因为您想匹配精确的字符串，而不是正则表达式。

这是我完成的代码:

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"]
window.addEventListener("load", ClearScreen);

var lettersTyped = document.getElementById("userInput");
lettersTyped.addEventListener("keyup", filterWords);
var clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", ClearScreen);

function filterWords() {
    for (var i = 0; i < words.length; i++) {
        var val = words[i].toLocaleLowerCase().indexOf(lettersTyped.value);

        if (val === -1) {
            var child = document.getElementById(words[i]);
            if (child) {
                child.parentNode.removeChild(child);
            }
        }
    }
}

function ClearScreen() {
    document.getElementById("wordDiv").innerHTML = "";
    for (var i = 0; i < words.length; i++) {
        newP = document.createElement('p');
        newP.appendChild(document.createTextNode(words[i]));
        newP.style.fontSize = 20;
        newP.id = words[i];
        var div = document.getElementById("wordDiv");
        div.appendChild(newP);
    }
    lettersTyped.value = "";
    lettersTyped.focus();
}

请注意，此代码仍然存在一些问题。例如。如果您键入“mary”然后删除 Y 以得到“mar”，您可能希望“MARIA”再次出现。此外，您可能希望比较不区分大小写。 (如果您输入大写字母 M，它不应过滤掉“MARY”。)

编辑

一个更完整的修复，考虑到我指出的其他问题。请注意，我已经完全摆脱了“清除”按钮，因为现在用户只需删除他们的输入即可再次查看完整列表。

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"];

function filter() {
    document.getElementById("wordDiv").innerHTML = "";
    var typed = document.getElementById("userInput").value.toLocaleLowerCase();

    for (var i = 0; i < words.length; i++) {
        if (words[i].toLocaleLowerCase().indexOf(typed) !== -1) {
            var p = document.createElement("p");
            p.appendChild(document.createTextNode(words[i]));
            document.getElementById("wordDiv").appendChild(p);
        }
    }
}

window.addEventListener("load", filter);
document.getElementById("userInput").addEventListener("keyup", filter);