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

**URL:** <https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262>\
**Category:** Help Requests\
**Created:** [June 16, 2021, 2:16pm UTC](https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262 "2021-06-16T14:16:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![norgie](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@norgie](https://discourse.aurelia.io/u/norgie)\
**Post date:** [June 16, 2021, 2:16pm UTC](https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262/1 "2021-06-16T14:16:08Z")

</div>

(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

---

<div class="post-metadata">

**Author:** ![Kremnari](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kremnari/32/2177_2.png) [@Kremnari](https://discourse.aurelia.io/u/Kremnari)\
**Post date:** [June 17, 2021, 2:12am UTC](https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262/2 "2021-06-17T02:12:17Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![norgie](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@norgie](https://discourse.aurelia.io/u/norgie)\
**Post date:** [June 17, 2021, 9:02am UTC](https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262/3 "2021-06-17T09:02:43Z")

</div>

Just got to love Aurelia.

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

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

```auto
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. 🙂

---

<div class="post-metadata">

**Author:** ![Kremnari](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kremnari/32/2177_2.png) [@Kremnari](https://discourse.aurelia.io/u/Kremnari)\
**Post date:** [June 17, 2021, 12:30pm UTC](https://discourse.aurelia.io/t/what-would-be-the-most-appropriate-way-of-using-an-text-input-control-as-a-filter-for-the-rows-in-a-table/4262/4 "2021-06-17T12:30:48Z")

</div>

> [@norgie](#):
>
> Just so neat and sweet. 🙂

It really is 👍

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