Searchbar Tag, Search Tag and Trigger Tag

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.


<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"></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"></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.