A small tutorial on adding search bars in your app

Hey Thunkers!

Lots of people ask how to add search bars inside their projects. Today, I found out how to, and I thought I’d share it with you since search bars come in handy in lots of projects, and this is quite a common question. If you want a search bar, you most likely want it for sieving through Airtable records/ data from grid and list layouts. So, I’ll only be talking of a search bar with regards to tables.
So, first add a row at the top of your app (this is possible anywhere but it’s best to do it at the top).
Inside the row, add a text-input and a button.
image
Add a list viewer underneath that.
image
Don’t add any text-items.
It’s also best to add a search terms column in your table, with all the possible terms one could use to search. You can do it like this:
image
If your user enters data that gets sent to your table, don’t forget to update the search terms!


Here, the user has entered a lot of data, and all the other users can search for that by using search terms. Here, the data a user can search for is: book name, author name, and genre. I’ve used the lower case block, so it’s easier to convert the user’s search into the same case as the search terms.
Now, go to the blocks section of the screen in which you have the search bar.
Now, initialize two variable to empty lists. The first one can be ‘search final results’ and the other can be ‘search row id result’.

Set the list-viewer’s text-items to null whenever the screen is opened, and reset the two variables.
image
A good debugging strategy, to check that everything is working is setting the text of a label after every function (set text, set variable abc to, etc). Here, I have set the text of a label after the Go button is clicked.

The best practice is to add a if from text_input1 get text ≠ null, otherwise, there is a likelihood of your app crashing if the text input is empty.

Again, I have set the text of a label to ‘not null’. In case your app crashes, this is a great way of knowing exactly where your app is crashing.
As you might have guessed, I am bringing out a ‘for each item block’. The list is list of IDs in my data viewer table.

In this search bar, I have set the label text for every block.

That’s the main bit. We are checking if the cell in column search terms and row id= a(remember the for each item?) contains the text from the search input converted to lower case(because that’s the case the search terms column is in). For that, we have to put the does contain inside a = true block.
Then, I’ve set the label text to got one (debugging again). Then, we have gotten a different cell with the row id as a (because the search term for a contains the input’s search), and inserted it as the first in our variable search final results. And in our row id variable, we’ve inserted the row id itself(a). Then, we’ve set the list-viewer’s text-items to our final results variable. All of this is carried out inside the for each item loop.

Since it’s great to inform users when there are no results, instead of just leaving them wondering whether the app is malfunctioning, we’ve checked whether our variable is still the same as it was before we started the loop (empty list), and if yes, we’ve set a label text to ‘No search results found’.
Our last bit of code: getting data.
When the user clicks on an option which we displayed, containing their search results, you probably want to display more data around that in a different screen. For that, we require the row id which contains the data we displayed on the list-viewer, that the user clicked.
image
Initialize a clicked info variable. This will receive the row id.
Get out a WHEN LIST-VIEWER1 ITEM CLICK block. Inside that:

Our search row id variable contained the list of row id’s that had the search terms the user entered. We are getting the indexth item of that list, and setting the clicked info variable to it. Then, we are navigating to a different screen. You can display other information like this:

Sorry if I wasn’t that clear.
Hope this helped.
Happy Thunking!
P.S: This works well if you have to display information on a different screen. Since I am receiving information from a data source and not from Airtable, the index won’t be of any value to me, as Data Sources contain RowIDs, a combination of letters and numbers. That is why we have saved the row Id as well, to refer to in a different screen.

2 Likes

Great tutorial. I would use a list of objects or JSON structure instead of using two lists and trying to correlate them. You give an opportunity of mismatch in case one list was updated successfully and the other failed.

[Update]
Using the [Click] event for the search button means the search will only take place in the end of typing the search string. If you use [Data Change] event of the input_text field, the search result will be interactive but you need to see the impact of reading records from the table after every character is keyed in.

1 Like

I think this is an easier way -

In place of the entire list variable take the values from the list viewer and save it in a temporary list.

Thanks for sharing. Here’s another example to remix!!

This also employs an invisible 300 millisecond timer that is set to loop

Thank you @roumak-coder and @nradjt74jatz for the input. But your solution is not optimised for multi-user environment. The solution provided by @codeswept will display results of data populated to the tables even during the search where your solutions lack. :grin:

2 Likes

Yes , I’ll change if to when textinput1 input. Thanks for all the feedback.

1 Like

@nradjt74jatz,
I believe you copied the code from an old example.
About a year ago, Thunkable did not have [Data Change] event for labels and text_input therefore as a workaround the timer was used to trigger the code block to search the list which makes it look interactive.

Now, the code block to search for results can be triggered using the [Data Change] of the component which results in an even easier and more straightforward code blocks. :grin:

Thanks. There seems to be an error in your defineentirelist function.

Thanks for the suggestion. Sadly, JSON isn’t my strong point. I do realize it could fail incase one list doesn’t update, but I did my best, and shared it, as a workaround for other people who, like me, might not be great with Objects. @roumak-coder Here I’m using data sources and am not searching from a predefined list. Yours is great too, though!

3 Likes

:+1: :clap: