Question

我正在使用repeat.for在HTML中显示的json数组。我想使用搜索文本框搜索匹配的记录。

Answer 1

您可以使用ValueConverter执行此操作：

data = [{'a': 'lorem'}, {'a' :'Ipsum'}, {'a' :'bla'}, {'a' :'blub'}, {'a' :'meh'}, {'a' :'isu'}];

export class FilterValueConverter {
    toView(items, search) {
        if(search === "" || search === undefined) return items;

        return items.filter((item) => item["a"].includes(search));
    }
}

这个例子暗示你只想搜索一个属性（＆＃34; a＆＃34;）。但您也可以搜索多个属性并匹配结果。

使用

<div repeat.for="element of data | filter: search" >
...

这将区分区分大小写，您可以使用.toLowerCase()来匹配区分大小写。

如果您有大量数据，可能会出现性能问题

Answer 2

与Kabaehr建议您可以通过值转换器实现此功能，以将过滤功能应用于能够中的每一行。我在这篇博客文章中有一个如何做到这一点的例子：

http://sean-hunter.io/2015/12/29/searchable-tables-with-aurelia-value-converters/

如何使用repeat为Aurelia创建过滤器？

2 个答案: