Making a Search Bar

Note: This tutorial was updated in June 2020 to reflect the new when Text Input Changes block, which makes adding a search bar to your app much easier!

This post will talk about creating a search bar for your app.

Search Bars are great if you have a lot of text items or List Viewer options that you want to make available to the user without having a lot of items on the Screen at once.

This post will describe how to make a search bar with a search button and a search bar that updates automatically when the text in the search bar changes.

With Search Button

In the Layout for this app, we have:

A Row containing a Text Input and a Button (which is named SearchButton)

A List Viewer

We use two functions in this app.

defineEntireList simply creates a list entireList with the text items that we want the user to search.

updateTempList creates an empty list called tempList, then scrolls through every item in entireList and adds the items which contain the string in the Text Input to tempList.

When every item in entireList has been checked, tempList is now the list of every item from entireList which contains this string.

The items in tempList are then displayed to the user using a List Viewer.

The user can then select an item from this list!

Automatic Update

Making a search bar with automatically updating results makes your app look really professional.

The process of assembling and displaying the search results works the same as above. We are simply replacing the trigger.

Instead of updating the search results when the user clicks a Search Button, we will update the results when the text in the Text Input changes.

In the Layout for this app, we have

A Text Input

A List Viewer

We have the same function defineEntireList as earlier.

When the Text of the Text Input changes, we save the current text as a variable and call the updateTempList function.

updateTempList works the same as previously, except that we are searching for the string we saved as searchString in the suggest function.

You can find a sample app that demonstrates these functions here.

You can see an app that incorporates this search bar method here: Translator App with Search Bar

16 Likes

Can you make a copy let me test it?public copy project please.

4 Likes

I have updated the link, it should work for everyone now.

9 Likes

Thanks.
When i click one item i want to see more info from local db second screen. It didnt.
https://x.thunkable.com/projects/5c52cb8d1cd58a4ee1dad777/Screen1/blocks

1 Like

Hi,

What if i want to search from a spreadsheet. Can you kindly show some tutorials?

Thank you

1 Like

Hi there,

Try checking out this tutorial from Domhnall on searching and filtering a LocalDB:

1 Like

This does not work as of May 2019

3 Likes

A post was merged into an existing topic: Search & Filter LocalDB

Hi there, thanks for the heads up!

When this app was first made, a ‘null’ variable could be treated like an empty list. This isn’t the case any more. Have fixed the app by changing the initial setting of the lists to the empty list.

2 Likes

what will i use to store the data

1 Like

We were talking about this in a Customer Success chat, but you could use the Search Bar to choose a column from a Spreadsheet and display that column’s contents in another List Viewer. For these blocks, you just need to have a list of the column names from your spreadsheet stored as a list (using the defineEntireList function in this tutorial).

image

1 Like

Very slow at searching in list

3 Likes

Maybe your phone memory?

2 Likes

It shouldn’t be. I have a Samsung S8.

The issue may lie though in the fact I am loading a list of about 200-300 options from firebase. I locally save it after gathering it but it’s still very very very slow. Works none the less.

1 Like

This is surprising. Somehow I did a local search on 20 thousand lines and it worked very quickly. It is necessary to watch the search algorithm.

2 Likes

My list is roughly 300 items, these items have spaces in them and its from firebase db. heres how it looks in firebase:

" item1, item 2, this is another item, etc"

Does the spaces before the item and in the middle of the item affect it in any way, or is it the fact it is loading from firebase.

Also would like to point out it glitches sometimes, i made a false search piece of code to stop users calling a search with no data in the input box, and by removing this and adding it back (its a function block) then it fixes the search bug.

Does the extended list viewer include a built in list search do you know?

Thanks

1 Like

Hi there,

Could you message me with a Share link to your project so I can check this out?

Thanks,
Jane

1 Like

certainly

2 Likes

The scrFinder page gives an example of a search. Does it work fast for you or is it very slow too?

https://x.thunkable.com/projects/5cd84f23e3097f3353fdad45/project/properties/designer/

3 Likes

How can I control that the timer does not trigger the filter function while I’m still writing?
maybe setting another timer to control when the letters change and just fire the other timer if 1 second has passed without writing something.

some idea, because I have tried and I do not see how.

1 Like