Searchbar Tag and Search 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.

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 searchbar and the search result to be displayed. Use the query attribute to pass the initial query to the widget - using the neomo-search-bar tag.

<neomo-search-bar tenant="vkb" 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 tenant="vkb" 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.