# Search

:eye: [PREVIEW](https://greenelab.github.io/lab-website-template/testbed#search)

The template can dynamically (when a visitor comes to your site) filter items on a page based on a search.

## How can a search happen?

* A visitor types in a search box component (see below).
* A visitor clicks on a link with e.g. `?search=some search` in the URL, like a [tag](https://greene-lab.gitbook.io/lab-website-template-docs/basics/components/tags) or a [team member page research link](https://greene-lab.gitbook.io/lab-website-template-docs/basics/team-members) (see `aliases`).

## What items are filtered?

By default, the only items on the page that are filtered the [card](https://greene-lab.gitbook.io/lab-website-template-docs/basics/components/card), [citation](https://greene-lab.gitbook.io/lab-website-template-docs/basics/citations), and [post excerpt](https://greene-lab.gitbook.io/lab-website-template-docs/basics/components/post-excerpt) components.

You could customize this in `/_scripts/search.js` to filter any kind of item that is selectable with a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), for example `p` for paragraph elements.

## How are items filtered?

You can search for terms, phrases, and tags:

`term1 term2 "full phrase 1" "full phrase 2" "tag: some-tag" "tag: another-tag"`.

Items that contain **all of the terms**, **at least one of the phrases**, and **at least one of the tags** will be considered a match. Matching is case insensitive. Tags are also insensitive to hyphens, e.g. `open science` is considered the same as `open-science`.

Search words will be highlighted in the results (if they're longer than 2 characters). In addition to the visible text content of the item, tooltip and other content are also searched (via the `data-tooltip` and `data-search` attributes).

## Relevant components

You can put a search box component on the page to let visitors type in their own search:

```liquid
{% include search-box.html %}
```

This also updates the URL so they can conveniently link to that page with that search.

To show info about what items are being filtered, e.g. *Showing 12 of 60*, you can put a search info component on a page:

```liquid
{% include search-info.html %}
```

Only visible if something is being searched.