使用列和全局过滤器过滤表 - 最有效的方法？

Question

我有一大块json数据，我希望使用表以最有效的方式过滤客户端。每个标头都有一个输入过滤器，用户可以在其中输入字符串以过滤该特定属性。还有一个全局输入过滤器，用户可以在其中发出“自由文本搜索”。

一直在考虑如何做到这一点，并希望听到你对此事的看法。

用于可视化表格的示例

+---------------+
| Global filter |
+---------------+

+----------+---------+----------+-----------+
| Column 1 | Colum 2 | Column 3 |  Column 4 |
+----------+---------+----------+-----------+
|   ...    |   ...   |   ...    |    ...    |
+----------+---------+----------+-----------+

选项1：

单击过滤器输入时：

1. 从所有已填充的过滤器生成一组数据，但点击过滤器除外，并将其缓存。
2. On key-up - 根据步骤1的结果过滤数据。

这没关系。但是仍然意味着一些开销，因为有些搜索会多次进行。

选项2：

1. 按键 - 基于缓存搜索的过滤器
2. On blur - 当前结果将覆盖缓存的搜索。

如果我所做的只是添加过滤器，这将更好。但是，当我想要更改已填充的过滤器时，逻辑“中断”。

选项3：

这将是1和2的混合。点击过滤器输入：

1. 如果过滤器不包含默认值（即用户未输入过滤数据），则根据除当前过滤器之外的所有过滤器生成缓存。
2. 按键 - 基于缓存搜索的过滤器
3. On blur - 当前结果将覆盖缓存的搜索。

我自己进行头脑风暴，而选项3是我在简单性和性能方面能够提出的最佳方式。

我是在正确的道路上吗？你觉得怎么样？

/帕特里克

Answer 1

第三种选择更好，但看起来有一个小问题。假设您正在使用基于AND的过滤，您应该采取类似这样的步骤

1. 如果过滤器不包含默认值（即没有用户输入的过滤数据），则根据除当前过滤器之外的所有过滤器生成缓存。
2. 如果过滤器包含某些值，则会丢弃缓存。从所有已填充的过滤器生成一组数据，但单击过滤器除外，并将其缓存。
3. 按键 - 根据上述缓存结果过滤。
4. On blur - 当前结果将覆盖缓存的搜索。

details = [ {user:"A",location:"kansas"}, {user:"B",location:"kansas"}, {user:"C",location:"phoenix"}, {user:"D",location:"phoenix"} ]

假设[ ]是一个文本框。起初两个都是空的 [user=""] [location=""]

现在用户进入一个城市 [user=] [location=kansas]

//final cache :[{user:"A",location:"kansas"},{user:"B",location:"kansas"}]

现在用户尝试输入用户名

[user=A] [location=kansas]

用于搜索的缓存：[{user:"A",location:"kansas"},{user:"C",location:"kansas"}]

// final cache after step 3: `[{user:"A",location:"kansas"}]`

现在用户想要进入另一个城市 [user=A] [location=phoenix] //给出0结果

用于搜索的

缓存：[{user:"A",location:"kansas"}]

每当某个过滤器的过滤说“位置”时，您不应使用此过滤器之前已经减少的结果集。