过滤掉用户在 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);