Multiple Instances

Two explicitly bound search instances on the same page. This page is intended to verify that searchbar, trigger, suggest and results stay isolated.

Step 1: Add the following script tags to your html head.

<head>
...
<script type="module" src="https://cdn.search.neomo.cloud/neomo-search/neomo-search.esm.js"></script>
<script nomodule src="https://cdn.search.neomo.cloud/components/neomo-search.js"></script>
...
</head>

Step 2: Bind each public tag set explicitly to one neomo-search root via id and for.

<neomo-search-bar for="search-a"></neomo-search-bar>
<neomo-search-bar-trigger for="search-a">...</neomo-search-bar-trigger>
<neomo-search id="search-a" tenant="oev-experience" searchbar="false"></neomo-search>

<neomo-search-bar for="search-b"></neomo-search-bar>
<neomo-search-bar-trigger for="search-b">...</neomo-search-bar-trigger>
<neomo-search id="search-b" tenant="oev-experience" query="versichern" collapsed="true" searchbar="false"></neomo-search>

Step 3: Verify that each searchbar, trigger, suggest list and result area only affects its own instance.

Instance A

No initial query. Use this to test opening, typing, suggest and result rendering.

Instance A: hidden when searching.

Instance B

Initial query + collapsed state. Use this to test expanded trigger state, close/reopen and isolated results.

Instance B: hidden when searching.