StaticSearch single script tag

The easiest way to add a search facility to your site is a single <script> tag. Add the following code to any template, perhaps in the HTML <header> where you want a search icon to appear:

template excerpt

<script type="module" src="/search/staticsearch-here.js"></script>

The script automatically loads the web component script and updates the DOM at the script’s location. It’s effectively the same as using this code:

<script type="module" src="/search/staticsearch-component.js"></script>

<static-search label="search" title="search Ctrl+K">

  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em">
    <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-8 6a8 8 0 1 1 14.3 5l5.4 5.3a1 1 0 0 1-1.4 1.4l-5.4-5.4A8 8 0 0 1 2 10Z"/>
  </svg>

</static-search>

Refer to the web component documentation for template and styling options. The main restriction is that you cannot set custom attributes that control search results.

Re-run the indexer #

Once you have added StaticSearch functionality to your static site’s templates, you should re-run the indexer to ensure word indexes are up-to-date.