Drop-down suggestions and search by letter

Hi everyone,

I am looking for a way to have drop-down suggestions when typing in a search box in our app, such as Google does. I have seen it in the app Veggie Alternatives, which was made on Thunkable, but I am not sure whether that’s available to copy (I was not able to find it anyway). This search bar is on the home page currently, and at the moment just redirects to the browse page, which has a list of the categories you can search among.

I am also looking for a way to have clickable letters of the alphabet which will take you down the list to the corresponding section on our browse page. We pretty much need this function because otherwise there will be a great deal of scrolling, with 200+ items on the list.

I have searched in Community and on Docs for this so far, and am experimenting using this article Making a Search Bar - Thunkable Tutorials - Community. I plan to add pictures of what I have soon. Thank you very much!

2 Likes

So I have been trying to replicate the setup from the article I referenced above. First I tried copying it, but I don’t know how to add it to my own project, and it had multiple error messages. As I’ve tried recreating it manually, I realized I need multiple variables in order to do this correctly and don’t know how to add them

1 Like

I really appreciate how much effort you’ve put into this and how well you’ve described those efforts thus far! And screenshots are always really helpful, too.

You can add variables to a screen by using the Initialize Variable block from the Variables drawer. Once you type a name for your variable, it will then show up as a block of it’s own (e.g. app variable newname) in the Variables drawer.

See this: Variables - Thunkable Docs

3 Likes

Here’s a demo I made that shows how to add clickable first letters (clicking A shows all database items starting with “A” or “a”, etc.):

https://x.thunkable.com/copy/364c3e50a6beeeebdbc0f116ec745bba

2 Likes

thank you very much indeed!! I will give this a try once I’m out of my team meeting. Appreciate the time you put in! I will update

2 Likes

Ok, so I created new variables, that worked well!

I finished following the directions from the article I mentioned but where in the article it looks like this:


In mine I was not able to find either green component, though I checked all the components and core and even the advanced tab. I tried a replacement for one of them, “Set List viewer’s text items to templist”

Then I followed the steps to get an update as you type (same article). Again found the same issue, don’t know where to find “from textinput get text”. Here’s my latest screenshot from that attempt.

I am now going to try playing around with the demo you sent @tatiang, thank you!

1 Like

The from TextInput2 get Text block has been replaced with a block called TextInput2's Text and should also be green.

2 Likes

Thank you! I found it.

I believe I have filled in what I can, both on the home page and with the search by letter feature, using your demo.
For the home page search bar, here is what I have. I haven’t gotten any results yet, so I’m a bit stumped. Earlier I tried replacing “item1”, “item2” etc with the text of the list I use for the browse page(“AIRLINES-APPLIANCES & HARDWARE…”), but that didn’t seem to shift anything.


For the Browse page and the search by letter, I wasn’t sure how to find the “list of values” block, though I think I have everything else. Very grateful for the demo and I hope I can iron out my wrinkles here, I’ll keep working at it
image

image

1 Like

The “list of values” block is in the Data Sources drawer.

2 Likes

Thank you very much for this help!!
I am meeting an issue with the last thing, it shows the edge of some blocks when I click “Data Sources” but doesn’t allow them to interacted with. I hard refreshed and logged back in, but it still seems not to show it. I thought it was a bug, but notice it displays just fine in the demo. I am playing around with different data sources to see if it changes, and also added another listviewer (red outline) to drop down from the search by letter box if it’s a disconnect between the letter group and the main (green) list.
image

It sounds like you might be mixing variable types. Lists have to connect to list blocks, text to text blocks, etc.

Post a screenshot of the blocks you’re having trouble connecting.

I think I may have it now!!

It took some time but I used the demo as reference to see what could be wrong. Initially, this is what I got after some tries:
image

I noticed we have several data sources and deleted less needed ones. Sure enough I could interact with it now, but it just froze with the data source, so I eventually tried adding it as a manual list like in the demo rather than the airtable link.

That is what seemed to work! And I switched it back to show the original list.
Here it is before I click a button


Now I click A…
image
Then C.
image

So I think it’s working great! Thank you immensely for all your efforts, it worked finally!
I’ll work on the other search bar now, maybe these methods can work there too

1 Like