Searchbar Tag, Search Tag and Trigger Tag with initial Query

Searchbar and search result will be displayed via two separate tags - allowing for a separation of input field and search results. However, the Searchbar can be switched on and off via trigger tag.

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: Add the following tags somewhere within the html-body where you want the trigger content, e.g. a lens icon to be displayed. Then also add the tags for searchbar and results. Use the query attribute to pass the initial query to the widget - using the neomo-search-bar tag.


    <neomo-search-bar-trigger>
      <button slot="collapsed" hidden><i class="fa-solid fa-magnifying-glass"></i></button>
      <button slot="expanded" hidden><i class="fa-solid fa-times"></i></button>
    </neomo-search-bar-trigger>
    <neomo-search-bar tenant="vkb" collapsed="true" query="versichern"></neomo-search>
    <neomo-search tenant="vkb" facets="true" searchbar="false"></neomo-search>

Step 2b: If you want to hide certain elements or tags whenever a search result or a hint is displayed - you can add the hiden-when-searching attribute and include a css selector.


    <neomo-search-bar-trigger>
    <button slot="collapsed" hidden><i class="fa-solid fa-magnifying-glass"></i></button>
    <button slot="expanded" hidden><i class="fa-solid fa-times"></i></button>
    </neomo-search-bar-trigger>      
    <neomo-search-bar tenant="vkb" collapsed="true" query="versichern"></neomo-search>
    <div>Content to be always visible.</div>
    <div class="hide-when-searching">Content to be hidden when searching.</div>
    <div class="hide-when-searching">Content to be hidden when searching.</div>
    <neomo-search tenant="vkb" searchbar="false" facets="true" hide-when-searching=".hide-when-searching"></neomo-search>
    <div>Content to be always visible.</div>

Step 3: Test your integration.

Content to be always visible.

Content to be hidden when searching.

Content to be always visible.