Skip to Content

Search

<Clover.Search /><clover-search>4 kB added to a page with a Root, gzipped24 kB added to a page with a <clover-root>, styles included, gzipped

IIIF Content Search of the Manifest: a field, then the hits by Canvas, with the words around them, and Previous and Next to step through them.

<Clover.Root iiifContent={url} searchQuery="">
  <Clover.Body />
  <Clover.Search />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json"
  search-query="">
  <clover-body></clover-body>
  <clover-search></clover-search>
</clover-root>

API reference

Inside a Root<clover-root>, it searches the Manifest through its Content Search service, version 1 or 2, and lists the hits by Canvas, each with the words around it, from up to 10 pages of results. Choosing a hit goes to it and frames it, and every hit is drawn on the Canvas. Inside the field, before its clear, Previous and Next step through the hits in order, across Canvases, showing which is current over the total (“3 / 11”); results go to their first hit as they arrive, as find in a page does. With sticky the field is held in view as the hits scroll; the Panel’s own Search section has it, and draws its hits on the Canvas only while it is open. The page’s own text, its OCR, is not drawn until a search finds something in it. In a Panel, a search started outside its Search section opens it (The open section). It renders nothing without a search service. Its other props, and its ref, go to its element.

PropTypeDefaultDescription
headingLevelnumber3Each Canvas’s heading, one below the heading it sits under.
stickybooleanfalseThe field held in view as the hits scroll under it.
size"large" | "small""large"The field’s size: its submit a round control’s, or a tad smaller, for a narrow column.
aselement type"div"The element to render.
classNamestring—Added to clover-content-search.

A Content Search of the Manifest, where it offers one: a field, and its hits by Canvas, each going to its place, with Previous and Next through them.

NameTypeDefaultDescription
heading-levelnumber3The level of each Canvas's group of hits, one under the heading it sits beneath. Past 6, each names what it heads instead.
stickyboolean—The field held in view as the hits scroll under it: at the top of the box that scrolls them, or under a panel accordion's stuck headings.
size"large" | "small"largeThe field's size: large, its submit a round control's, or small, a tad smaller, for a narrow column.

Examples

A query to start with

Use searchQuerysearch-query, on the Viewer or a Root<clover-root>, to search as the Manifest opens and again whenever it changes. The Viewer draws the hits on the Canvas and lists them in its Panel’s Search section.

<Viewer
  iiifContent="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json"
  searchQuery="Moskau"
/>
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json"
  search-query="Moskau"></clover-viewer>

From your own part

clover.search(query), from useClover()root.clover, searches as the field does, and the Root holds the results as search. To ask a service yourself, leaving the Root alone, use searchServiceOf(manifest) and search(service, query).

function SearchFor({ query }) {
  const { clover } = Clover.useClover();
  return (
    <button type="button" onClick={() => clover.search(query)}>
      Find {query}
    </button>
  );
}
<button type="button" id="find">Find Moskau</button>
 
<script type="module">
  const root = document.querySelector("clover-root");
  document
    .getElementById("find")
    .addEventListener("click", () => root.clover?.search("Moskau"));
</script>

Without highlights

The hits are drawn as the annotation set SEARCH_SET_ID. Hide it, and they stay listed.

clover.setSetVisible(Clover.SEARCH_SET_ID, false);
<script type="module">
  // The search's hits are the set "content-search".
  document
    .querySelector("clover-root")
    .clover.setSetVisible("content-search", false);
</script>

Previous versions

Clover 3.x › Viewer

  • iiifContentSearchQuery={{ q }} is searchQuerysearch-query.
  • renderOverlays: false is clover.setSetVisible(SEARCH_SET_ID, false).
  • defaultTab: "manifest-content-search" is the Panel’s defaultValue="search".
  • There is no searchResultsLimit: every hit returned is listed.