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);