Making a Search Bar


#1

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

Ignore the Timer in the screenshot, it will be used in the next section

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

A Timer (the shorter the time interval, the faster your results list will update)

We have the same function defineEntireList as earlier.

We have a function suggest, which is executed when the timer fires. If the text in the Text Input has changed since the timer last fired, the updateTempList function is executed. This is basically functioning like a block that says ‘when TextInput1.Text changes, execute updateTempList’.

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

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


Search box for list items in thunkable x
Search & Filter LocalDB
Simple searchable report
Search bar like SAFARI
Growing from multiple if/else chains to a database
#2

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


#3

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


#4

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


#5

Hi,

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

Thank you


#7

But working in android app


#9

Hi there,

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


#10

This does not work as of May 2019


split this topic #11

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


#12

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.