Hi @laurence, would love to share what I have, but I am new to Bubble so I’m not sure the best way to do that. So I decided to give you a step-by-step process of what I’ve done. Hope it helps you and anyone else who comes along.
My use case: I needed an autocomplete drop down that would change the input field text to whatever the user clicks on in the dropdown.
I’m using the ZQ Fuzzy Search & Autocomplete plugin for autocomplete functionality. Apparently the fuzz search (matching mispellings etc) is better than the original Search & Autocomplete plugin that you are using, but for our purposes below I think it works much the same.
Step by step process of how I got mine working…
MAKING THE SEARCH INPUT: These steps link the autocomplete plugin to the search input. For me, all of this stuff is living in the header because that’s where I needed it, but you can put it where ever you want.
- Place a regular input element in the header (name it something like Auto Search Input).
- Wrap the Auto Search Input element in a group (name the group something like Auto Search Input Group)
- Install the plugin ZQ Fuzzy Search & Autocomplete
- Add the ZQ Fuzzy Search & Autocomplete element to the page. It doesn’t matter where you add it, because it’s invisible, but it needs to be placed onto the page somewhere (name it something like Search&Autocorrect)
- Edit the Search&Autocorrect element you just placed on the page:
- Configure it to search whatever you want by setting the data type, data source and fields to search. For this example, we’ll be searching Users. So Data Type is set to User, Data Source is set it Search for User, and Fields to Search 1 is set to First Name.
- Check the box that says “Set text to match from an input box” (this part is important for linking it to the input).
- Add an ID to the Input Box ID field (name it something like SearchInput)
- You can mess the with search settings more here if you want, but the stuff above is required
- Edit the Auto Search Input element you added earlier. Scroll down to the bottom and set the ID Attribute to SearchInput.
Steps 7 and 8 are for for populating the input text with a value from the results when clicked. Skip them if you don’t need this functionality. We’re going to set a custom state on the input group and set the custom state to a value we get from the repeating group when clicked. Then the input element will use that data as the text it displays.
- Edit the Auto Search Input Group you created earlier.
- In “Type of Content” set it to “Text”
- In “Data Source” select the input group you are currently editing (i.e. Auto Search Input Group).
- Then click “Create a New State” (Name the custom state something like Data From Result). Choose “text” as the type of the custom state.
- Edit the Auto Search Input element. Set the Placeholder and Initial Content fields to “Parent Group’s text”. Set the Content Format to text.
MAKING THE RESULTS: These steps display the results as a repeating group. All of this stuff can live at the top of the element tree. Even though it’s related to the input, it does not need to live in the same place as the input on the element tree.
- Add a Focus Group the page wherever you want the auto populated dropdown search results to display. Normally this is right under the input, but it can be wherever you want. Name it something like Auto Search Group Focus. Set the Reference Element to Auto Search Input to position it relative to that element.
- Inside the Auto Search Group Focus add a repeating group field. Name it something like Auto Search Repeating Group. Set the Type of Content to whatever type of content you want to show. Because we’re searching users in our example I’ll set Type of Content to User. Data Source is “Search&Autocorrect’s matches”. If you remember, Search&Autocorrect is the name of our hidden autocorrect plugin element on the page. So we’re displaying the matches from the Search&Autocorrect element inside the repeating group.
- Inside the first group of the Auto Search Repeating Group add another group. This group is a container that hold all the details of search result. Name it something like Auto Search Group Container. Set the layout and style however you need.
- Inside the Auto Search Group Container add whatever details you want to show in the search results. Can be images, text, whatever. For this example we’ll grab the users first name and display it as text. To do that add a Text element inside the Auto Search Group Container and set it to “Parent Groups’s Users First Name”. Showing their avatar could also be cool and works much the same.
MAKING THE WORKFLOWS: This makes the search results display when the input element is clicked, and puts data from the repeating group when clicked into the custom state so we can display it in the input.
- Open the Auto Search Input Group and click Start/Edit workflow. In the workflow configure it like so:
- Workflow: When Auto Search Input Group is clicked, only when Auto Search Group Focus is visible.
- Step 1: Animate an element. Element is Auto Search Group Focus. Set the Animation to Transition SlideUpOut. Set the duration to 200 ms.
- Create a copy of the workflow above, but change it to be like so:
- Workflow: When Auto Search Input Group is clicked, only when Auto Search Group Focus isn’t visible.
- Step 1: Animate an element. Element is Auto Search Group Focus. Set the Animation to Transition SlideDownIn. Set the duration to 200 ms.
- This last workflow step is only needed if you want the result display in the input when clicked. Open the Auto Search Group Container and click Start/Edit workflow. In the workflow configure it like so:
- Workflow: When Auto Search Group Container is clicked
- Step 1: Reset a group/popup. Element is Auto Search Group Container.
- Step 2: Set state of an element. Element is Auto Search Group Container. Custom state is Data From Result. Value is “This Groups’s User’s First Name”.
Annnndddd that’s it. Phew!
I’m a hobby WordPress developer so I know more than a lay person about webdev, but it took me a FULL DAY working on nothing else to get that “simple” element up and running. It would be a nightmare for most people.
Bubble is great for API and workflows etc, but their editor reminds me of webdev in the 90’s. I love the direction their taking as a company and the whole no-code ethos, but I REALLY hope they focus on fixing their editor.
The real kicker is that I STILL haven’t got it to display perfectly (damn editor!). The input in my header is floating to the right when set with a fixed width.
If you appreciated the step-by-step instructions I would love if you could take a look at this post where I’m trying to solve that specific problem: [openBase] Template to Kickstart your App Development