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></neomo-search-bar>
      <neomo-search tenant="vkb" collapsed="true" query="versichern" 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></neomo-search-bar>
      <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" collapsed="true" query="versichern" 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.