Angularjs 使用过滤器以角度搜索

各位

我有一个大表（大约100列x 100行）。在表上方，我们有一个文本框，帮助用户在表中搜索

我们想要的是，当用户输入要搜索的文本时，我们只显示与用户文本匹配的行。搜索应该是响应性的，即当用户输入文本时，搜索应该缩小行数

模板中的代码类似于：

<input type="text" ng-model="SearchText" placeholder="Search within table" />
    <table>
    <tr ng-repeat ="row in hugeTableData | customSearchFilter: SearchText">
      <td>row.column1</td>
      <td>row.column2 ..</td>
      <td>row.column100</td>
    </tr>
    </table>

问题是搜索速度慢得令人痛苦。因此，如果我正在搜索一个单词，那么搜索文本框甚至不会一次注册整个单词，因为在用户输入的单词的每个字符之后，它都会经过这个循环。。花几秒钟。。返回结果。。然后在文本框中注册下一个字符。。等等

重点是。。这种搜索方法导致了绝对糟糕的用户体验

---

如果有人对如何更好地解决这一问题有任何想法，请给出善意的建议。

您可以进行一些速度优化

mpapp.filter('customSearchFilter', function() {
    return function(rows, text) {
        if (text) {
            var result = [];        
            var upperCaseText = text.toUpperCase();
            angular.forEach(rows, function(row, i) {
                if (row.alwaysIncludeFlag) {
                    result.push(row);
                }
                else {
                    for(var col in row){
                        var v = row[col];
                        if (!angular.isUndefined(v) && v.toUpperCase().indexOf(upperCaseText) >= 0) {
                            result.push(row);
                            break;
                        }
                    }
                }
            });
            return result;
        }
        else {
            return rows;
        }
    };
});

---

使用

$timeout

服务限制筛选。还可以在字符串长度增加时缓存行。假设第一个字母将100缩小到20，下一个字母添加了搜索仅20个元素，而不是100个可能重复的Stewie-您能详细说明如何使用$timeout来解决此问题吗？Charlieftfl。。缓存将如何实现？

mpapp.filter('customSearchFilter', function() {
    return function(rows, text) {
        if (text) {
            var result = [];        
            var upperCaseText = text.toUpperCase();
            angular.forEach(rows, function(row, i) {
                if (row.alwaysIncludeFlag) {
                    result.push(row);
                }
                else {
                    for(var col in row){
                        var v = row[col];
                        if (!angular.isUndefined(v) && v.toUpperCase().indexOf(upperCaseText) >= 0) {
                            result.push(row);
                            break;
                        }
                    }
                }
            });
            return result;
        }
        else {
            return rows;
        }
    };
});