2

I am having json array that I am showing in HTML using repeat.for. I want to search matching records using a search text box.

Amit
  • 71
  • 1
  • 5
  • 2
    Possible duplicate of [Filter array in aurelia view](http://stackoverflow.com/questions/29162022/filter-array-in-aurelia-view) – Fabio Apr 25 '16 at 13:43

2 Answers2

4

You could do this with a 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));
    }
}

This example implies that you just want to search for one property ("a"). But you could also search in several properties and match the result.

With 

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

This will match case sensitive, you could use .toLowerCase() to match not case sensitive.

If you have a great amount of data this could may have performance issues

kabaehr
  • 1,040
  • 11
  • 18
1

Like Kabaehr suggested you can achieve this with value converters to apply a filter function to each of the rows in the able. I've got an example of how to do this in this blog post:

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

Sean Hunter
  • 1,041
  • 8
  • 19