Using Fuzzy Search and Autocomplete in a Reusable element

[ben26]

Following up this closed thread, I have a solution that works for me:

How to use "ZQ Fuzzy Search and autocomplete" plugin in a reusable element?

I have setup a nice autocomplete search box. It’s built using the ZQ Fuzzy Search and autocomplete plugin. Everything is housed inside a reusable element: The input element, group focus drop down, repeatable group, hidden ZQ Fuzzy Search and autocomplete element, and all the workflows. When I have the reusable element displayed once on the page, it works great. But when I have multiple instances of the reusable element on my page, it stops working. The drop down does not appear 9 times out of…

The problem outlined there is that the Fuzzy Search and Autocomplete plugin requires that the ID of the search bar is unique on the page. If you embed this into a reusable and place it more than once on a page (as may well happen in an SPA-like build) then you’ll find that only one of the reusables will work.

To get around this:

1. Install the Keystroke Input Trigger plugin Keystroke Input Trigger Plugin | Bubble

2. In your reusable, drop in an “input monitor” in alongside your existing search bar and Fuzzy Search.

3. Now create two Custom States on your reusable; one called Search Bar ID, and one called Search Text. Both of these should be type Text. Set the Search Bar ID default to something.
   

4. On your Fuzzy Search, UNTICK Set Text To Match from an Input Box, and set the Text To Match to the Search Text custom state on your reusable:
   

5. Set the ID on your Input Element to the Search Bar ID custom state.
   

   

6. Set the inputmonitor (the new plugin you dropped in at step 2) to bind to the Search Bar ID custom state.
   

7. In the reusable’s workflows, we’re now going to randomly generate the ID. So, go to the Workflow pane and create a “General → When Condition is True” workflow. Set it to run when your search bar is visible. Make sure you leave it to only happen once!
   

8. In the workflow, add an “Element Actions”->“Set State” and set the Search Bar ID custom state to “Calculate Formula”->“Generate Random String”, setting it to 30 characters including everything except for special characters.
   

Enjoy!