StaticSearch bind module

The JavaScript bind module can automatically or programmatically attach StaticSearch functionality to HTML <input> and result elements. It can be used in situations where you want to create your own search widget but utilize StaticSearch functionality including:

• <input> debouncing and initiating calls to the search API
• displaying results
• handling the URL querystring and hash when clicking a result link followed by the back button.

The bind module used by the web component so the processes are similar.

The following example automatically binds <input> and results elements using HTML alone:

<!-- include script once on your page -->
<script type="module" src="/search/staticsearch-bind.js"></script>

<!-- define input and result elements -->
<search>

  <input type="search" id="staticsearch_search">
  <div id="staticsearch_result"></div>

</search>

Input field attributes #

The <input> field must use the ID staticsearch_search but can have any other HTML attributes set.

The name attribute is presumed to be q by default and its value is checked on the querystring. You can set any other value, e.g.

<input type="search" id="staticsearch_search" name="query">

Search result attributes #

The results element must use the ID staticsearch_result but can set optional attributes:

Overriding HTML templates #

The HTML generated when displaying results can be changed using <template> elements.

Search results message #

A message such as the following is shown when search results are available:

7 found for “web component”…

It uses the HTML code:

<p part="resultmessage">
  <span part="resultcount"></span> found for
  <span part="searchterm"></span>&hellip;
</p>

You can override this using a <template> with an ID of staticsearch_resultmessage anywhere in your HTML page. You must set the part attributes "resultmessage", "resultcount", and "searchterm" as necessary, e.g.

<template id="staticsearch_resultmessage">

  <p part="resultmessage">
    StaticSearch found
    <span part="resultcount"></span> results
    for <span part="searchterm"></span>:
  </p>

</template>

Search result item #

Search results are shown in an ordered list: <ol part="searchresult">. The following HTML is used for each list item:

<li part="item">
  <a part="link">
    <h2 part="title"></h2>
    <p part="meta">
      <time part="date"></time> &ndash;
      <span part="words">0</span> words
    </p>
    <p part="description"></p>
  </a>
</li>

You can override this using a <template> with an ID of staticsearch_item anywhere in your HTML page. Set the part attributes "item", "link", "title", meta, date, words, and "description" as necessary, e.g. show the title but no description, date, or word count in an <article>:

<template id="staticsearch_item">

  <li part="item">
    <article>
      <h2 part="title"><a part="link"></a></h2>
    </article>
  </li>

</template>

JavaScript binding #

You can programmatically bind StaticSearch functionality to <input> and result element using JavaScript. This may be useful if you want further control or you’re using a client-side framework to dynamically create content. Consider a page with the following HTML:

<search>

  <input type="search" id="mysearch">
  <div id="myresult"></div>

</search>

Bind the elements to StaticSearch using code such as:

import { staticSearchInput, staticSearchResult } from '/search/staticsearch-bind.js';

staticSearchInput( document.getElementById('mysearch') );
staticSearchResult( document.getElementById('myresult') );

staticSearchInput(element) is passed the input element.

staticSearchResult(element, options) is passed the result element and an optional options object with the following properties:

Example usage:

// custom results message
const messageTemplate = document.createElement('template');
messageTemplate.innerHTML = `
  <p part="resultmessage">
    <span part="resultcount">0</span> results found for
    <span part="searchterm"></span>:
  </p>
`;

// bind results element
staticSearchResult(
  document.getElementById('myresult'),
  {
    minScore: 5,
    maxResults: 10,
    messageTemplate
  }
);

Re-run the indexer #

Once you have added StaticSearch functionality to your static site’s templates, you should re-run the indexer to ensure the latest content is indexed.