Search table when text input submitted, clear search when text input is deleted

I've got a table with a search bar which will filter the table only when the search is submitted, as I don't want to trigger queries on every keystroke. However, I would like the table to show all of the rows as soon as the search term is deleted or cleared, without having to press Enter afterwards.

I've got it working at the moment but I'm just wondering if there is a simpler way that I'm missing (I'm new to all of this!)

Currently, the table is initially populated by query1.data (no filtering) which runs when the search bar text (textinput1.value) changes, but is disabled when textinput1.value.length > 0.

When textinput1 is submitted, it triggers query2 which runs the filter query.

After either query runs, it triggers a JS script which does a table1.setData to either query1.data or query2.data depending on whether textinput1.value.length > 0 or not.

This way the search runs when something is typed in and Enter is pressed, but will reset to the unfiltered view when the search term is deleted. Would just like to know if there's a simpler solution as I'm going to need this functionality a fair bit.

1 Like

This seems like a pretty decent solution @krausenhaus. One thing you could do to save a query is instead of using .setData in a JS query, you could update the “data” field in your table’s settings to be a conditional, like {{ textinput1.value.length > 0 ? query2.data : query1.data }}.

3 Likes