Question

民间，

我有一张大桌子（大约100列×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) {
    var result = [];
    if (text) {
      var upperCaseText = text.toUpperCase();
      angular.forEach(rows, function(row, i) {
        if (row.alwaysIncludeFlag) {
          result.push(row);
        }
        else {
          var matched = false;
          for each(col in row) {
            var v = row[col];
            if (!angular.isUndefined(v) && v.toUpperCase().indexOf(upperCaseText) >= 0) {
              matched = true;
            }
          }
          if (matched) {
            result.push(row);
          }
        }
      });
    }
    else {
      angular.forEach(rows, function(row) {
        result.push(row);
      });
    }
    return result;
  };
});

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

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

如果有人有任何关于如何更好地，善意地提出建议的话。

Answer 1

您可以做一些速度优化。

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

使用过滤器在Angular中搜索

1 个答案: