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

[thecashbag]

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 10, and when it does it usually has search results populated from the wrong input instance.

Is this a known limitation of the plugin? Any idea how to fix it?

[thecashbag]

Hey @ZeroqodeSupport, wanted to tag you in this because I think it’s your plugin? Hopefully you know how to solve it.

[ZeroqodeSupport]

Hey, @thecashbag!

Thanks for reaching out and tagging us!

Let us investigate this issue and we’ll get back to you asap.

Best,
Zeroqode Team

[ZeroqodeSupport]

Hey, @thecashbag!

We have tested the plugin with several reusable elements on the same page and it works properly.

So, please make sure that the Input Search element and Search Autocorrect element have the same ID in the Attribute ID and Input box ID fields of the first Reusable element.

The ID in the Attribute ID and Input box ID fields of the second Reusable element should be different as in the first one. Please see screenshots as a reference below.

The first reusable element.

The second reusable element.

Best,
Zeroqode Team

[thecashbag]

Hey thanks for the screenshots and for looking into this.

But I’m not sure how you’re able to change the settings each time you add another instance of the reusable element to your page.

The reusable element has the Attribute ID and Input box ID settings baked into its design. Therefore each copy of the reusable element on your page will have the exact same Attribute ID and Input box ID.

Are you suggesting that I clone the reusable element every time I want to add it to my page, and adjust those settings? That seems to defeat the point of making a reusable element in the first place.

[thecashbag]

Hey @ZeroqodeSupport, are you able to confirm if I have the correct understanding? I have to clone the reusable element each time?

[ZeroqodeSupport]

Hi, @thecashbag!

Apologies for slow reply!

@thecashbag

But I’m not sure how you’re able to change the settings each time you add another instance of the reusable element to your page.

@thecashbag

The reusable element has the Attribute ID and Input box ID settings baked into its design. Therefore each copy of the reusable element on your page will have the exact same Attribute ID and Input box ID .

Yes, that is right. Thefore we have created a new reusable element and changed its settings.
Please see screenshot as a reference.

@thecashbag

are you able to confirm if I have the correct understanding? I have to clone the reusable element each time?

No, you haven’t Just create a new one with its settings.

Hope this helps!
Best,
Zeroqode Team

[gotobits]

@ZeroqodeSupport – we’ve been testing this plugin and having trouble with #2

1. works if we hardcode “text to match”, e.g., to “[token-of-choice]”
2. doesn’t work with the ID attribute pattern described in this thread
3. does work if we set text to match to dynamic data -> input box -> value

is there some common error with #2 – while #3 is ok, curious if #2 has faster response or perhaps fewer API calls, etc., assuming we can get to work

[ZeroqodeSupport]

Hi, @gotobits!

Thanks for reaching out!

Could you please share the steps you did while testing to reproduce them and find out what is going wrong? The plugin element settings screenshots and the result screenshots would be super helpful. Thanks.

Best,
Zeroqode Team