Building an Auto-Complete Search Feature on Bubble.io
ฝัง
- เผยแพร่เมื่อ 16 ม.ค. 2025
- TIP: If you're having trouble showing the GroupFocus when the input is focused, try adding a short pause as the first action in the "Do when shape is visible" workflow.
You see this in nearly every fully-functioning app and website you use...
It's what speeds up searches, helps find results, and makes users' lives just that much easier...
It's...
Auto-complete.
Yep, even something as simple as automatically completing a search for your users can make their experience noticeably better.
Learn how to build an auto-complete feature with this video lesson. It shows you 3 different "levels," so you can choose the best fit for yourself.
___________
💥 Want to work side by side with our team to launch your app-based business? We're now accepting entrepreneurs into our private mentorship program. Apply here for a strategy call to learn more: coachingnocode...
Plus, here are a few more ways to get help fast...
👉 Free scalable app workshop: coachingnocode...
👉 Self-led training: www.coachingno...
👉 Facebook community for no code app entrepreneurs: / 1165236046981865
Hey thanks. Keep up good working! Your tutorials are clear and easy to follow. Very helpful :) !
Sebastian Rchidi thank you! I'm glad they've been helpful for you!
I’m having trouble with my repeating group under the search bar it keeps attaching itself to the top left corner
Hi!
Thanks for the video
I followed the instructions, but it doesnt work. The shape the group focus appears, but the group focus immediately disappears...=/
same, i dont know what i am doing wrong here. Checked every step like 10 times
A talented teacher who knows the learners' quest and thirst. Thank you so much Mrs🤩
You're very welcome!
Thank you! That only forms a list of matches, but what workflow is required to make the list clickable, so that a user could start typing something in the input box and then select the relevant item from a list of matches?
I have been looking for this! Thanks!!!
You are an amazing teacher! Keep it up!!!!
Thank you, Josh!
That is such a clever hack, creativity comes in so many forms :)
I hope it was helpful, Paul! :)
Thanks for the video! Could you also show how can we select one of the options from the autocomplete group focus and display them on the search input itself?
Did this not get answered because there is no way to do this? I am struggling to get this working
@@simongiles1000 You put the items inside of a group, then you make a workflow for when that group is clicked. Then you can create a (go to page) choose a page and (data to send = parent group's user)
Thanks for going through all the variations!
You're welcome, Ryan! I hope it was helpful!
Thank you very much for the content! Great job!
You're welcome, Douglas, and thank YOU!
Can also set the 'only when' to search input's value is not empty...this eliminates the need to do the hack with the shape element
Or even clicked right?
You're a great teacher
Thanks, Dale!
This helped a lot. Thanks!
I'm glad to hear that, Vinicius, and you're very welcome!
Nice tricks, next step is how to click on one result and display it inside the field (and have an icon to remove it)
I need this functionality too((
Thanks for the videos. I am having issues with the plugin. I dont think the creator is updating the plugin anymore.
Hey Emil! You might try reaching out to them via email if possible
Thank you, this was a very helpful video!
You're very welcome!
That's pretty cool and has lots of layers that I bet could be used in other ways ;) Thanks for sharing
You're welcome!
Hello Gaby. So I set up this workflow, however, it seems to not be working properly. When I preview the page and focus the input, the focus group just flashes and then disappears. What am I doing wrong?
Hi Antonio, great question -- this is something that seems to have changed since I created the video. If you're having trouble showing the GroupFocus when the input is focused, try adding a short pause as the first action in the "Do when shape is visible" workflow.
@@coachingnocodeapps Ok great. Thank you so much!
You're welcome!
forum.bubble.io/t/group-focus-bug/32963/9
great vid exactly what I needed thanks again Gaby
Awesome, you're welcome, Stephen!
Thank you coach for this amazing video
You're welcome!
where do i need to find ID Attribute to the search box? i dont find it...
Great concept. Thanks
you deserve it., thanks for sharing
Thank you!
Thanks, Gabby! Learned so much from you so far! One question about this is how to select one of those options and have it populate into the input box. Could you please outline that? Thanks again for these videos! :)
Hi! Did you figure this out? I am wondering the same. And experimenting with Custom States
@@abhinavchakraborty997 At the end, I didn't end up needing to have this feature, but I do think I ended up achieving it in my tests with using Custom States. Selecting it defined a custom state which then auto completed the search. I’m going by memory and since it didn't make it into the final version, I can't check, but I hope that's helpful.
I'd be cool to see how the button function you talked about at 4:38 would work :)
Here's what you do: create a profile page with its content type set to User. A button inside the repeating group would trigger a "Go to Page" action (page = Profile page), and in that action you'll see "Data to Send,"which you'll set to "Current cell's User." This will send the current cell's user to that profile page. Then, on the profile page, you can reference the "Current Page User's [field]" to display or work with that user record. I highly recommend looking at the Bubble tutorial called "Sending Data to Pages" here: bubble.is/lessons
@@coachingnocodeapps awesome! Thanks!
Awesome thank you this helped me a lot!
Great, Niki! I'm glad it helped!
Great tutorial!!! Though I wonder what the search box input under the input form section is for???
Austin Leung Hi Austin, I'm not too clear on what you're referring to. Are you talking about the element design on the page or the setup or the plugin setup? The little square with magnifying glass in the upper left is an invisible element that is needed to make the auto-complete happen.
I meant the in-built Search Box element under the Input Forms Section of the Design Tab. Not the plugin or the standard form input element you customized for the search function.
Austin Leung Oh right! I thought you were referring to something in the video. That search box element is great for a more simple auto-complete feature. You can only search one field at a time and the design of the results cannot be customized.
@@coachingnocodeapps The search box element actually completes the search in your input box. Is there way to do it with your more powerful method?
For some reason my focus group isn't appearing automatically when words are entered into the input. The focus group is still only appearing when the icon is clicked. Any tips for how I can fix that? Also is there a way to signify to the user that there search term resulted in no results? One more question, is there a way to clear the input when the user has clicked out of it because at the moment the search term is staying in the search bar? Thanks so much for anyones help with these questions :)
Hey there! I'd suggest using your debugger to narrow down any issues. Use conditions to show a message that there are no results. To clear the search term, create a workflow to reset a group that contains the input when the input has been changed
Thanks for the video! How can I make this to filter the data I get from an external API?
Hey Carlos! You should be able to add a "filtered" operation at the end of the API data source. The filter can reference the auto complete search
Thanks so much for this video! A problem I've encountered is that currently, group focus elements can only be fixed width. Now I'm trying to use just a regular group to built this feature, so that my UI can be responsive.
You're welcome, Audrey! 🙌
Amazing thank you!
from France with love
🙏
Hi there, thanks for you tutorial. How make for watch the repeating group when i dont input?
Hi Yorgio, I hope I'm understanding - you want to show the repeating group of results even if you don't have the input focused? Simply leave the repeating group as "visible on page load" (check the box) in the property editor for the RG. That way it will always be visible.
Super clear, Very helpful. Thank you so much!!!!
Just one question. When I try to replicate the search functionality behavior, it seems it is case sensitive, but that`s not the case in this tutorial. How did you get that working case insensitive?? Thank you again!!
Hi Gaby, thanks for the video. a couple of very nice tricks in there.
A question I have is how do I reset or clear the input without manually selecting and deleting?
Hey there, create this workflow, when input's value is changed and empty, reset the group that contains the input
this was very helpful... the best so far..... but how do i make my work a mobile app?
Hi there - great question. This is a big question! To start, you'll want to build it as a Single Page App, where everything lives on one page. Then, you'll need to use a 3rd party wrapping service like GoNative to package the app in a compatible format for the stores. If you want to talk through it some more, feel free to book a strategy call at coachingbubble.com/booking
Hey. I"m experiencing some issues with search and autocorrect plugin
Hi Gabby, the video is very interesting. And if the Plugin allowed to change the threshold at run time with a Slider Input, for example, it would be an excellent solution. It will be possible ?
Sorry, but I want to do a search for categories (pizza, burgers, kfc, soup, salad, sushi) and in the repeating group, in data sourse i put"search for categories" and next in the type I put "categories" but in the field below I put any field contains "input categories's value" is not in the list, not available....What can I do? please
(in the list i have only input restaurants,but...i need categories)
Thanks its agreat video, but Is this applies to the any app or to mobile app? What will happen if I use the Repeated Group without using the the group focus? Why Enter Key is not working instead of magnifing lense?
Hi there, if you've set this up so that tapping an icon or button triggers the groupfocus to show, then it should work the same in mobile. The enter key equivalent in mobile might not translate the same in all mobile browsers due to differences in versions, behavior, etc. so you'll definitely want to cross-test the functionality for your app's needs and adjust from there. You can certainly use the repeating group without the group focus; the behavior will simply be a little different and require more manual clicking to show hide (or other workflow logic to show/hide). I hope this helps!
Thanks Madam...
You're welcome!
Is all the data pre loaded here or is the search making database calls each time?
Hi Forsdyke! Bubble will need to load the RG once, and every time you do a search afterwards, it won't need to load again (until you refresh the page).
Works only first time input got focus
When I search in it after I'm finished, it only brings up the account I'm logged in to, even though I created more, do you know how to fix this? Thanks!!
Hi, how can we make all elements visible when the input is empty ? Thanks
Hey there! Use a condition for this
after auto complete the search if i want to get the one select and get to the search bar how it can be done?
Hi Kalana, put the search bar inside a group, and set the group's type to "text." Then, set the initial content of the search input to "parent group's text." When you select a search result, display this text to that group, and also reset the group.
the plugin thing isnt working for me but thanks for the tutorial!
Hey there! You're welcome! I'd try going through some troubleshooting steps to see what the issue might be
@@coachingnocodeapps ok thanks. will try that.
This plugin doesnt work with cyrillic symbols
great video
Thanks, Yoofi!
Can I do it using a SQL DATABASE?
Has this process been updated or is it the same?
Great video Gaby. I also loved your Udemy course. I’m trying to modify it so instead of searching for users I’m trying to search for video courses in a library. Is this possible because I’m lost
Hey Rick! You can create a search for video courses in your library. I'd actually recommend checking out our VIP Membership, which has a number of different lessons on more custom search functionality: coachingnocodeapps.com/vip-membership
Hi, great video! Thank you from Sydney, Australia! I have followed it step by step and watched it many times. When I preview my search function I cannot see the text of the repeating group in the group focus box, just the colour of the box itself. Any help you could offer would be great! Thanks again!
Hi Erica, I've actually been noticing some changing behavior in the timing of the "Do When" workflow in the environment created here. Try adding a short pause as the first action in the "Do When" workflow sequence. The action can be found under Navigation > Add a Pause. Set it to something like 250 ms. Try that.
@@coachingnocodeapps Thank you so much for your prompt reply! Very helpful!
@@coachingnocodeapps Had the same issue - but this worked. Thanks!
The plugin apparently can't search a list of text. Is there any work around for this?
Hey there! Try using the search box element instead
How do I make it where I click the element I want after searching and it opens up a specific page?
You can create a workflow or use a link to do this, if I'm understanding your question correctly
@@coachingnocodeapps will try that thank you. Yeah what I wanted to do is say I click on Ross from you video and I want it to open up his page with his info or bio
Hi there! Your videos are extremely helpful. I have a question regarding how to do this exactly but using an input field in from a reusable header. I am having trouble getting the group focus to talk to the reusable element. Any suggestions on how to solve this?
(I basically want to render results from an input field that is a reusable element)
Hey there! You could use a custom state to send data from the RE to your page
Hi Gabby, would it possible to do the same with addresses from the Google API? This wouldn't be in my data types, but i would like for the repeating group to autocomplete my input address with googles database of addresses
Great video, as always! Is this method still the way to go? It seems like a lot of small hacks for something most solutions would benefit from :-)
Bubble now has an "is hovered" state available so you can remove the shape hack! Ex: "Do when input is hovered" and you'll get the same result with one less step! 🙌
@@coachingnocodeapps🙏🙌
how do i insert the selected data in repeating group to input and set focus to somewhere else so it will hide the repeating group when a data is selected?
Hi Asyraf, if the input is inside a group, you can reset the group when data is selected. You might need to use the help of custom states to distinguish between a search term and a selected value. That should get you going! Feel free to check out any of the resources here if you're needing more help: www.coachingnocodeapps.com
Hi, what happened when selecting an item from the popup repeating group you've created? how to change the value of the INPUT field itself based on the repeating group selection?
Hi Ahmad, that's a really good question. To achieve that, you'll need to use a custom state to the value of the selected item. Then set the initial content of the input field to the custom state's value so that by default it displays that value. When you click the item to select, you need to Set State and then RESET the a group that contains the input so that it can show the initial content again. Your state would be easiest to work with if it's a text value. Hope this helps!
@@coachingnocodeapps Can you give an example with steps on how to achieve that. Or is there a video that might go through the steps? Thanks
@@coachingnocodeapps if I'm not mistaken, isn't this the whole point of the above video? i.e. there is no point in having an auto-complete search if you can't then make the next step and select one of the options you have returned in the search? Maybe you could make a follow-up video to achieve this, in the meantime I will try what you suggest.
Hi Gaby, in 12.04, with the search and focus plug in, after backspacing all the input in the search bar (clearing all inputs), all the data in the repeating group is not showing up as the previous normal search bar. May I know how can we stimulate the repeating to show up even if the search bar is empty using the search and focus plug in please? Hope you see this!! Thanks
thanks
You're welcome!
This worked for me at first but when I added about 80k of rows into my platform, the search never completes. The native bubble search worked almost instantly for the same search. I really like your approach more because it's flexible. Is there something I can do to improve the performance? I'm not really even sure how to debug, I'm not sure if it's the search/autocomplete plugin or repeating group that caused the lag.
Hey there! I'd make sure to use pagination on the RG and also look into the Algolia integration
how to collapse height of the RG?
"Do while condition is true" WORKS POORLY.
Hey there, Volodymyr! First, I hope you're having a good day so far! I'd check out the videos on showing/hiding/collapsing groups and RGs. In fact, if you do a quick search on our channel for "repeating group," you'll see a number of videos that will help you in working with them, including collapsing a RG height.
Actually, I have a question: what if you want the user to look for a list of sports for example that you manually enter into the app? Would you enter a "Sports" field in your data section? And where would you write the list of sports that the user can search for ?
You'll want to create a new custom data type in Data > Data Types called "Sport." Create a field for "Name" that is a text. Then, go to Data > App Data and create new Sports entries. The data source of your repeating group for search can now be "Search for Sports" with any relevant constraints.
@@coachingnocodeapps thanks!
Hi. How do you make this clickable? How to add it in the input field? Thanks for the tutorial ;)
Hi Ulrich, the very beginning of this videos show you which elements you need. It's made up of a regular input with a group focus element below it. Inside the group focus, you add a repeating group. Follow along with the tutorial step by step and you'll be able to replicate the auto-display I've created.
Subscribed!
Awesome, Niki! :)
I have one question, Can users form my webapp conmect to their IG accts and get their pictures?
Hi Victor, yes you can connect to Instagram. We're actually publishing a tutorial on that in our VIP Membership today if you're interested in checking it out: coachingnocodeapps.com/vip-membership
@@coachingnocodeapps ok, gotcha!!
Hello ! Isn't it going slow whith a lot of datas ... Thanks :-)
Hi Andre! The speed depends on a lot of different factors, including the number of records. Also, the way you write the search matters, too (lots of filters, etc can slow it down). If speed is an issue with your searches, you can try using a service like Algolia, which will speed them up exponentially and is better for large databases. There's a lesson on setting up Algolia in the VIP Membership if you're interested in checking that out: www.coachingnocodeapps.com/vip-membership
Hello Gaby,
Thank you for all your videos and what you do, you saved me hours of work :) !!
But one question that a lot of users are asking for this feature : How do you do to click on one result and display it inside the input field ? This is, of course, the purpose of this search feature. Do you have a link / video to show it or can you explain it in the comments ?
Thanks for your help and everything you do.
Ok, you already answered that question 2 years ago :)
The answers for the people having the same problem :
--> Hi Ahmad, that's a really good question. To achieve that, you'll need to use a custom state to the value of the selected item. Then set the initial content of the input field to the custom state's value so that by default it displays that value. When you click the item to select, you need to Set State and then RESET the a group that contains the input so that it can show the initial content again. Your state would be easiest to work with if it's a text value. Hope this helps!
I'm glad you found it!! :)
How do I use this to search for two different custom data types?
Hey there! Use another URL parameter to pass the data type to the search results page. On that page, use 2 different repeating groups, which become visible depending on data type parameter.
Thank you for sharing!
I’m building a food sharing app between consumer and restaurants in their area. I have a repeating group on the consumers’ homepage where they can browse the foods available and the back end for restaurants to upload the food. Data types - User, Restaurant in area (Google Place only), Foods (Description (text), Photo (image), Location (Restaurant in Area), Expiry date (date), Price (number). This data is available in the repeating group
I’m having a hard time figuring out how to filter consumers’ search results by “Location”. Is it possible to filter the search results with Google Places as a constraint?
thank you in advance
Hello, your video is very useful, thanks!
In your example, could you explain when you click on the right person (ex: Chandler Bing) how you can :
1. Reset the input typing (ex: Chandler B...)
2. Set (Chandler Bing) as the input value
3. Register (Chandler Bing) to the database please
Thanks a lot for your help :)
Hi Gaby:-) Helpful video. Thank you. Things work as advertised but I'm having issues with deleting files on the backend. It's easy enough to remove them from the RG but it appears to be something else entirely when you're trying to remove them from the data record as the files exist both in AWS and in a backend record for your data type. For me, deleting an uploaded file action with the URL to delete being Current Cell's File delete's it from Amazon but I cannot for the life of me delete it from the data record in Bubble's DB (applications/documents). The action I'm trying to use is delete a thing but I can't find the right expression. I have choices to delete current user, current page user, and do a search for. No option for current cell's... Any suggestions? Thx:-)
another trick is to put the input in a group and when the group is clicked toggle the group focus
Executei todos os comando, mas não funcionou.. Que triste!
why not using "search box" ?
Hey there! This will help you customize the search results more than the search box is designed for
This isn't working for me. I followed your steps exactly and the groupfocus is automatically hidden after the search bar is focused. It is visible, but only for a brief moment. Not long enough to see anything. Or, when I click in the search bar and hold click, it remains visible, but disappears when I release the button.
Hi there, try using the tip in the description above to see if that helps the group focus behave properly.
@@coachingnocodeapps I don't see any options for setting a pause.
@@coachingnocodeapps Never mind. I found it. Thanks so much for your help!
I actually have another problem. Your proposed solution work, but if I click out of the search bar and then re-enter the search, I experience the same problems as before.
Try using your debugger to see, step by step, when elements are shown or hidden. That'll help you find the issue.
I can seem to be able to make it work. Dose anyone had same issue?
I set it up but noting gets displayed in the repeating group
I even tried the new version of it and same issue which means that i might be me doing something wrong
Hey Dan! I'm not sure what your issue would be, but I'd suggest starting over and test every step of the way so you can isolate your issue.
When you click your magnifying glass it opens the focus groupA, just like mine does. However, if you click back into the search bar your focus groupA stays focused and mine automatically disappears which is making my life SOOOO difficult. It just won't stay focused no matter what I do, throwing off the entire functionality.
I have to keep hitting search for the focus groupA to be show, otherwise it just disappears. So aggravating...
This is then creating an issue, when I make the shape work with the focus of the input, it won't keep the focus groupA open. It just shows itself for a blip of time.
Hm, run the debugger in step-by-step mode to see if the shape is hiding for some reason. Also, make sure the Do When condition is set to "every time."
forum.bubble.is/t/group-focus-bug/32963/9
I know that Google Adsense is relatively easy to integrate, but could you please make a video describing how to connect the two?
Hi Elise, thanks for the suggestion! I'll add it to the list. In the meantime, this video might also help you move forward with it: th-cam.com/video/czqWPGiS-qE/w-d-xo.html
It doesn't work for me :(
Can you help me?
Hey Bayan! It's hard to say what might be going wrong. I'd suggest starting over and making sure to follow each step, then using your debugger if there's still an issue!
Here is a challenge. How to build a Search - Repeating Group showing results - click an item within those results - then return to the repeating group results in order to continue viewing said results. (Going back and forth, in and out of a rep grp results. At the moment my users have to retype the search term to reshow the same results in the repeating group… it’s tedious.
idk why but this does not work for me
Hi Marius, Try going through again and following each step another time. It should work if everything is exactly the same. Good luck!
didnt work :(
Hi there, what specifically didn't work?
Anyone found a way to browse and select with keyboard? I nearly got there with the air plugin but that's not enough because arrow down would scroll the page…
[EDIT] I found a way: my search box is high in the page so I added a scroll to the top
Nice, Philippe! Glad you got it figured out 👍
@@coachingnocodeapps but it creates other issues I have to stop it... Will try with other plugin
I have the felling that she likes HIMYM
gas