# Drop-down suggestions and search by letter

**URL:** https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456
**Category:** Questions about Thunkable X
**Tags:** beginner, airtable
**Created:** [September 30, 2021, 9:29pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456 "2021-09-30T21:29:22Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [September 30, 2021, 9:29pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/1 "2021-09-30T21:29:22Z")

</div>

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](https://community.thunkable.com/t/making-a-search-bar/60939). I plan to add pictures of what I have soon. Thank you very much!

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [September 30, 2021, 9:49pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/2 "2021-09-30T21:49:31Z")

</div>

![search bar question 1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/2/c2c1e6d27c3638087304a25b8b390d24d785d99c.png)

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

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [September 30, 2021, 10:24pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/3 "2021-09-30T22:24:24Z")

</div>

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](https://docs.thunkable.com/variables)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [September 30, 2021, 10:37pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/4 "2021-09-30T22:37:35Z")

</div>

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](https://x.thunkable.com/copy/364c3e50a6beeeebdbc0f116ec745bba)

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [September 30, 2021, 10:40pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/5 "2021-09-30T22:40:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [October 1, 2021, 12:32am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/6 "2021-10-01T00:32:11Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/7/171dd28b6e923396d6583a814662d1a9e2285b71.png)  
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”  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/f/ef2252f9c8f59b71ed14d646a1d2a21a07acf66f.png)  
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.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/ee4935719a322dc4bf2299e298206fe575c4fc06.png)

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

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [October 1, 2021, 12:56am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/7 "2021-10-01T00:56:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [October 1, 2021, 10:35pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/8 "2021-10-01T22:35:10Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/a/3a22c7e3e5090f53cb95001e6aa2c65e87182443.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/d/cdee207ac3b9458d32498b4391c486ad1b195e50.png)

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/2/12a396457f90ecd558b0198dd9190e545a820055.png)

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3d402c158f90584fd1b0136bec15916925ebe291.png)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [October 2, 2021, 3:43am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/9 "2021-10-02T03:43:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [October 5, 2021, 2:03am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/10 "2021-10-05T02:03:02Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/8/28b61291a80f102e66250b31a97b04f1e925c119.png)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [October 5, 2021, 3:32am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/11 "2021-10-05T03:32:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![betterworldproject14](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@betterworldproject14](https://community.thunkable.com/u/betterworldproject14)
#### Post date: [October 5, 2021, 3:51am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/12 "2021-10-05T03:51:56Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/5/25675a2c17891f3311775de70fe6cf12bb8281bc.png)

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/d/dd6d27f264f9681f21c9c8bf60db8c3aeac15581.png)  
Now I click A…  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/8/28430cd3d702d1f8e7c6bc9611fcedaefe8d3f58.png)  
Then C.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/b/6b86f8cf935c3ce03f252393bbf8ff5fa94a29af.png)

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

---

<div class="post-metadata">

### Author: ![ruiqiang.zhangcvbffz](https://avatars.discourse-cdn.com/v4/letter/r/d26b3c/32.png) [@ruiqiang.zhangcvbffz](https://community.thunkable.com/u/ruiqiang.zhangcvbffz)
#### Post date: [August 24, 2023, 11:18pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/13 "2023-08-24T23:18:00Z")

</div>

why can’t open the links 2 yrs ago?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [August 25, 2023, 2:39am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/14 "2023-08-25T02:39:56Z")

</div>

Project links expire after 60 days. Here’s a new link: [Thunkable](https://x.thunkable.com/copy/3f023731a82280c9f961106f04ee9df1)

---

<div class="post-metadata">

### Author: ![ruiqiang.zhangcvbffz](https://avatars.discourse-cdn.com/v4/letter/r/d26b3c/32.png) [@ruiqiang.zhangcvbffz](https://community.thunkable.com/u/ruiqiang.zhangcvbffz)
#### Post date: [August 25, 2023, 4:33am UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/15 "2023-08-25T04:33:03Z")

</div>

Thank you.

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 1:15pm UTC](https://community.thunkable.com/t/drop-down-suggestions-and-search-by-letter/1536456/16 "2024-11-08T13:15:01Z")

</div>


