Search bar query for Google Sheets to limit results

[AdamG]

Hello, My apologies in advance as a newbie.
I'm building an extremely basic app which pulls a list from a google sheet.
I'd like to be able to filter the results from the search bar at the top.

I've tried to search, but have no idea how I can get the input on the search bar to limit the results in the table. I think I need to build a query that will limit the table, but am unsure how to build the query or where I should put it.

Again, my apologies for what is a very newbie question. If I had hair, I'd be pulling it out!

k

[ScottR]

It depends on what you are typing into the search field...what does the table component inspect panel look like in the search attribute?
Does it contain {{searchBar1.value}} ?

[AdamG]

Thanks for the quick reply. Where would I find the search attribute?
If I look at the table component inspect panel it doesn't show any search attributes (that I can see)

Inspector wrapped in the image for easy of viewing.

[ScottR]

Oh you are using a text area component and not a table?

[AdamG]

I think I am. In the morning I’ll try to see if I can change it to a table lookup and will report back.

[AdamG]

Hi Scott,
I'm definitely using a text area. I can't see anywhere that I could use a table instead.
I think I may be able to apply a transformer to the table to limit the search results.

I'm not sure what javascript is required to limit the results shown to the full record where the search string equals the BrickID or the Description though.

1= Googlesheet source data
2= the query being run
3 = transformer to limit the output

[ScottR]

My thoughts since I haven't built in mobile too extenssively yet:
Your initial query should still run but you would then need to have an event handler to take what is in the search field and run it against the initial data (stored in a temp variable) using either a Query JSON with SQL or using javascript (something like _.pick() - using LoDash library set in Retool already) and run it against the temp variable.
Your textArea could have the Data Source set to the temp variable value.
Once you type in the search field and either the query or js runs you can then set the textArea with the result from either one of those queries.

[AdamG]

Thank you very much for your advice. I really appreciate it. I'll keep battling on!

[AdamG]

I've progressed by building out the javascript code needed to limit the list.
This works successfully when the code is added to the "transform results" field of the Get Data query.

However, I now need to work out how to "refresh" the list if the search text changes.

I.e. currently I have a full list of say 50 items. Then I type in a search query and the results are limited to that query (say 10) but then the original list of 50 has been reduced to 10. So a secondary search (or removal of search term) doesn't show me the full list again.

The search continues!

function filterListBySearch(list, searchInput) {
  if (!searchInput) {
    return list;
  }

  return list.filter(function(item) {
    return Object.values(item).some(function(value) {
      return String(value).toLowerCase().includes(searchInput.toLowerCase());
    });
  });
}

return filterListBySearch({{ getBricks.data }}, {{ searchBar1.value }});

Edit: The right code, but the wrong location. Instead of using this to transform the results, create a seperate transformer and then use that as the data source for the table itself.

Thanks a lot for your help @ScottR - Very much appreciated.

[kbn]

Thanks so much for posting your question and recording the detailed solution here, @AdamG ! I'm sure this will help others who find this post and are on a similar journey. Thanks for the troubleshooting assist @ScottR