从只有指定值的 HTML 表中选择行？

Question

HTML 页面上有一个表格和一个文本输入框。每当用户在框中键入值时，Javascript 应过滤表并仅显示数据中具有该值的行。

我已经完成了这部分，但主要问题是如果用户在框中输入空格，然后输入另一个值，那么 js 应该过滤所有单词（用空格分隔的文本）至少出现一次的数据在该行的任何单元格中，就像 Google Suggestions 但带有表格。

有人有解决办法吗？

这里是代码

for(var i=0; i < trs.length; i++ ) 
{       
    tds = trs[i].getElementsByTagName("td");
    //alert(tds );

    for( var j=0; j < tds.length; j++ )
    {
        if( hasWords )
        {
            for( k = 0; k < searchWords.length; k++ )
            {
                if( searchWords[k].toLowerCase() != "" && tds[j].innerHTML.toLowerCase().search( searchWords[k].toLowerCase() ) == -1 )
                {
                    found = false;
                    //foundRows.push(trs[i]);
                }
                else {
                    found = true;
                    foundRows.push(trs[i]);
                }
            }
        }
        else
        {
            if( searchText != "" && tds[j].innerHTML.toLowerCase().search( searchText.toLowerCase() ) != -1 )
            {
                found = true;
                foundRows.push(trs[i]);
            }
        }           

        /*
        if( tds[j].innerHTML.toLowerCase().search( searchText ) != -1 )
        {
            found = true;
            foundRows.push(trs[i]);
        }
        */
    }
}

Answer 1

第一种可能性

用一个词做同样的事情。将用户的输入拆分为单独的单词并测试每个单词。

第二种可能性——优化过滤

遍历整个表似乎非常耗时，一开始只需少量开销即可轻松优化。由于 javascript 对象是一种关联数组，您可以这样做：

1. 页面加载时会遍历表格并解析每个单元格的文本。应该使用正则表达式进行解析，因为这样可以更简单地排除任何标点符号和类似的var rx = /([a-z]+)/gi。您也可以在这里轻松排除任何单字母单词var rx = /([a-z]{2,})/gi。
2. 将每个单词存储在与行相关的关联对象中。
3. 使用此对象进行过滤。

你的关联对象应该是什么样子的：

var data = {
    "tomorrow": [1, 2, 3],
    "will": [3, 5, 6],
    "be": [78],
    "sunny": [3, 9, 19],
    ...
};

每个单词的数组对应表行索引。因此，当用户在文本框中输入任何数据时，您可以轻松地将其拆分为单独的单词并获取所有数组：

var filter = $("#search_filter").val().split(" ");
var firstWordRows = data[filter[0]];

那么您所要做的就是与这些数组相交并隐藏除结果行之外的所有行。

好消息是您可以定义 stop 不过滤的词（如 in、a、the、of、at、 等）...

为什么还要麻烦第二个？如果页面更有可能被过滤多次而不是被加载，那么页面加载时的这种开销将使您的过滤变得敏捷。过滤速度会非常快，而且处理器占用更少。

建议

我强烈建议您使用一些 Javascript 库，这将使您的生活变得更加简单。以 jQuery 为例，它没有很长的学习曲线，并且与您可能拥有的现有脚本一起工作得很好。

Answer 2

如果您已经让它对一个单词起作用，只需将输入拆分为空格 (input.split(" "))，然后以相同的方式过滤，除了检查每个单词。

不过，如果您使用的是 JS 库，那肯定会更容易。