Question

我正在尝试建立一个简单的网站，用户在搜索框中键入输入，每次按下一个键，他们的输入都会与检查字符匹配的二维数组的第一行进行比较。如果他们输入的字符与任何内容都不匹配，我希望它删除该数组的特定存储桶。我试图为此编写基本代码，我认为可以工作，并在演示站点链接。（对不起，我只是使用一个免费的主机，并没有对方程表进行优化，所以请坚持下去）

http://fakefakebuzz.0fees.net/

如您所见，该功能并未消除相应的表行。例如，键入“A”不应该消除“平均当前公式”行，因为它的第一个字母是A，这意味着匹配不应该是=。

我整个上午都在查看这段代码，但找不到我错的地方。我也想坚持使用vanilla js。

有任何帮助吗？非常感谢。

Answer 1

首先，要检查字符串是否是另一个字符串的子字符串，可以使用indexOf。如果在另一个字符串中找不到该字符串，它将返回-1。

其次，除非确保在适当的时候更改计数器变量（在这种情况下为i），否则不应在循环时更改数组。

var dataToRemove = [],
    i;

for (i=0; i<tableData.length; i++) {
    if(tableData[i][0].indexOf(input) == -1) {
        // add the index to the to-be-removed array
        dataToRemove.push(i);
}

// remove them in reverse order, so the indices don't get shifted as the array gets smaller
for(i = dataToRemove.length - 1; i >= 0; i--) {
    tableData.splice(i, 1);
}
dataToRemove = [];

for (i=0; i<tableData.length; i++) {
    newTableContent += "<tr><td>" + tableData[i][0] + "</td><td>" + tableData[i][1] + "</td></tr>";
}

我没有测试过这段代码，但至少应该让你更好地了解如何使用这段代码。

Answer 2

我刚刚调试了您的代码，您使用的功能是narrowTable。首先从body节点删除onkeypress

<body onload="printTable()" onkeypress="narrowTable()">

并将onkeyup添加到您的输入中，如下所示：

<input type="search" name="equationSearch" id="equationSearch"
      placeholder="Equation Search" autofocus="" onkeyup="narrowTable()">

因为当您使用onkeypress时，键值尚未添加到输入框中，并且您的input值在您的函数中没有值，即：

function narrowTable() {
    var newTableContent = "";
    var matches = 0;
    var input = document.getElementById("equationSearch").value;
    //input has no value
    for (var i = 0; i < tableData.length; i++) {
        for (var j = 0; j < tableData[i][0].length; j++) {
            if (input == tableData[i][0].charAt(j)) {
                matches++;
            }
        }
        if (matches == 0) {
            tableData.splice(i, 1);
        }
        matches = 0;
    }
    for (var i = 0; i < tableData.length; i++) {
        newTableContent += "<tr><td>" + tableData[i][0] + "</td><td>" + tableData[i][1] + "</td></tr>";
    }
    document.getElementById("table").innerHTML = newTableContent;

}

您的代码遇到的另一个问题是打印表后，tableData变量已更改，因为您删除了一些索引。您应该将tableData重置为原始值，或者您可以执行以下操作：

function narrowTable() {
    //create a copy of your original array and use currenttableData instead
    var currenttableData = tableData.slice();
    var newTableContent = "";
    var matches = 0;
    //your code
}

这里的另一个问题是您搜索输入值的方式：

for (var j = 0; j < tableData[i][0].length; j++) {
    if (input == tableData[i][0].charAt(j)) {
        matches++;
    }
}
if (matches == 0) {
    tableData.splice(i, 1);
}

您可以轻松地执行此操作，而不是：

if(tableData[i][0].search("input") == -1){
    tableData.splice(i, 1);
}

搜索框功能不能消除正确的价值

2 个答案: