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. Showing their avatar could also be cool and works much the same. To do that add a Text element inside the Auto Search Group Container and set it to “Parent Groups’s Users First Name”. For this example we’ll grab the users first name and display it as text.
Name it something like Auto Search Repeating Group. Inside the Auto Search Group Focus add a repeating group field.Set the Reference Element to Auto Search Input to position it relative to that element. Name it something like Auto Search Group Focus. Normally this is right under the input, but it can be wherever you want. Add a Focus Group the page wherever you want the auto populated dropdown search results to display.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. All of this stuff can live at the top of the element tree. MAKING THE RESULTS: These steps display the results as a repeating group. Set the Placeholder and Initial Content fields to “Parent Group’s text”. Choose “text” as the type of the custom state. Then click “Create a New State” (Name the custom state something like Data From Result).In “Data Source” select the input group you are currently editing (i.e.Edit the Auto Search Input Group you created earlier.Then the input element will use that data as the text it displays. 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. Skip them if you don’t need this functionality. Steps 7 and 8 are for for populating the input text with a value from the results when clicked. Scroll down to the bottom and set the ID Attribute to SearchInput. Edit the Auto Search Input element you added earlier.You can mess the with search settings more here if you want, but the stuff above is required.Add an ID to the Input Box ID field (name it something like SearchInput).Check the box that says “Set text to match from an input box” (this part is important for linking it to the input).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. For this example, we’ll be searching Users. Configure it to search whatever you want by setting the data type, data source and fields to search.Edit the Search&Autocorrect element you just placed on 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) Add the ZQ Fuzzy Search & Autocomplete element to the page.
Bubble bazinga missing plugin install#
Place a regular input element in the header (name it something like Auto 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. MAKING THE SEARCH INPUT: These steps link the autocomplete plugin to the search input. Step by step process of how I got mine working… 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. I’m using the ZQ Fuzzy Search & Autocomplete plugin for autocomplete functionality. 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. Hope it helps you and anyone else who comes along. So I decided to give you a step-by-step process of what I’ve done. Hi would love to share what I have, but I am new to Bubble so I’m not sure the best way to do that.
0 kommentar(er)
