What would be the most appropriate way of using an text input control as a filter for the rows in a table?

Help Requests
1

(Aurelia 1)

Apologies for a fairly broad question.

I’m looking for a way to take user input and use said input in a “filter” function which returns all objects where the value of some property contains the input string. Then the table is redrawn with the new data set.

Would you bind to the keydown event using debounce and then call a function that does the filtering on the underlying table data? Any other approaches? Any plug-ins that already handles this use-case?

TIA

2

I do not know the possibility of a plugin. But…

Define a valueConverter. Value converters can be written to accept a parameter in repeat.for="item of set | filter(textInputVar)" see (https://aurelia.io/docs/binding/value-converters#binding-converter-parameters)

If you are wanting to create a more complex filter (multiple properties, regex) it would be better to tie the inputs into a filterService and access that in the valueConverter.

Kremnari

1 Like
3

Just got to love Aurelia.

<input placeholder="${searchPlaceholder}" ref="filterInput">

repeat.for="item of items | filter:filterInput.value"

export class FilterValueConverter {
  toView(items, searchString) : any {
    if (items === undefined) {
      return items;
    }
    if (searchString === undefined || searchString === null || searchString === '') {
      return items;
    }
    return items.filter(item => item.value.name.includes(searchString));
  }
}

Just so neat and sweet. :slight_smile:

1 Like
4

It really is :+1:

I’m glad you were able to figure the code out with that hint!
Kremnari