Search results

A list displaying all the search results found after a user has made a search.

Sample HTML

<main class="ds_layout  ds_layout--search-results  ds_search-results">
    <div class="ds_layout__header">
        <div class="ds_site-search">
            <form role="search" class="ds_site-search__form">
                <label class="ds_label  visually-hidden" for="site-search">Search</label>
                <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
                    <input name="q" required="" id="site-search" class="ds_input  ds_site-search__input" type="search" value="crofting" placeholder="Search" autocomplete="off" />
                    <button type="submit" class="ds_button  js-site-search-button">
                        <span class="visually-hidden">Search</span>
                        <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="ds_layout__content">
        <h2 class="ds_search-results__title"><span class="ds_search-results__title-count">87</span> results for <span class="ds_search-results__title-query">crofting</span></h2>
        <ol class="ds_search-results__list" data-total="87">
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting community right to buy</a>
                </h3>
                <p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
                <dl class="ds_metadata ds_search-result__metadata  ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Policy</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
                </h3>
                <p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation paper</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">28 August 2017</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
                </h3>
                <p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation analysis</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">1 September 2017</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting Commision</a>
                </h3>
                <p class="ds_search-result__summary">Elections regulations put before parliament.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">News</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">25 October 2016</dd>
                    </div>
                </dl>
                <dl class="ds_search-result__context">
                    <dt class="ds_search-result__context-key">Part of:</dt>
                    <dd class="ds_search-result__context-value"><a href="#">Equality and rights</a></dd>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Proposals on secondary legislation the Land Reform (Scotland) Act 2003 part three: crofting community right to buy as amended by the Community Empowerment (Scotland) Act 2015: consultation</a>
                </h3>
                <p class="ds_search-result__summary">Consultation relating to secondary legislation for the Land Reform (Scotland) Act 2003 part three, <mark>crofting</mark> community right to buy as amended by the Community ...</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Research and Analysis</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">1 September 2016</dd>
                    </div>
                </dl>
                <dl class="ds_search-result__context">
                    <dt class="ds_search-result__context-key">Part of:</dt>
                    <dd class="ds_search-result__context-value"><a href="#">Farming and rural</a></dd>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Permanent Secretary</a>
                </h3>
                <div class="ds_search-result__has-media">
                    <div class="ds_search-result__media-wrapper">
                        <div class="ds_search-result__media  ds_aspect-box  ds_aspect-box--square">
                            <a class="ds_search-result__media-link" href="#" tabindex="-1">
                                <img alt="" aria-hidden="true" class="ds_aspect-box__inner" srcset="/assets/images/people/jp-marks-96x96.jpg 96w,
                                            /assets/images/people/jp-marks-96x96-x2.jpg 192w,
                                            /assets/images/people/jp-marks-128x128.jpg 128w,
                                            /assets/images/people/jp-marks-128x128-x2.jpg 256w,
                                            /assets/images/people/jp-marks-160x160.jpg 160w,
                                            /assets/images/people/jp-marks-160x160-x2.jpg 320w" sizes="(min-width: 1200px) 160px,
                                        (min-width: 992px) 128px,
                                        96px" src="/assets/images/people/jp-marks-96x96.jpg" loading="lazy" />
                            </a>
                        </div>
                    </div>
                    <div>
                        <h4 class="ds_search-result__sub-title">John-Paul Marks</h4>
                        <p class="ds_search-result__summary">John-Paul Marks was appointed as Permanent Secretary to the Scottish Government on 1 January 2022.</p>
                    </div>
                </div>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Section 1 - Introduction</a>
                </h3>
                <p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation paper</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">28 August 2017</dd>
                    </div>
                </dl>
                <dl class="ds_search-result__context">
                    <dt class="ds_search-result__context-key">Part of:</dt>
                    <dd class="ds_search-result__context-value"><a href="#">Crofting consultation 2017</a></dd>
                </dl>
            </li>
        </ol>
        <nav class="ds_pagination" aria-label="">
            <ul class="ds_pagination__list">
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href="#">
                        <svg class="ds_icon" aria-hidden="true" role="img">
                            <use href="/assets/images/icons/icons.stack.svg#chevron_left"></use>
                        </svg>
                        <span class="ds_pagination__link-label">Previous</span>
                    </a>
                </li>
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link" href="#">
                        <span class="ds_pagination__link-label">1</span>
                    </a>
                </li>
                <li class="ds_pagination__item" aria-hidden="true">
                    <span class="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
                </li>
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link" href="#">
                        <span class="ds_pagination__link-label">13</span>
                    </a>
                </li>
                <li class="ds_pagination__item" aria-current="page">
                    <span class="ds_pagination__link  ds_current">14</span>
                </li>
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link" href="#">
                        <span class="ds_pagination__link-label">15</span>
                    </a>
                </li>
                <li class="ds_pagination__item" aria-hidden="true">
                    <span class="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
                </li>
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link" href="#">
                        <span class="ds_pagination__link-label">27</span>
                    </a>
                </li>
                <li class="ds_pagination__item">
                    <a class="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href="#">
                        <span class="ds_pagination__link-label">Next</span>
                        <svg class="ds_icon" aria-hidden="true" role="img">
                            <use href="/assets/images/icons/icons.stack.svg#chevron_right"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </nav>
        <aside class="ds_search-results__related" aria-labelledby="search-results__related-title">
            <h2 id="search-results__related-title" class="ds_search-results__related-title">Related searches</h2>
            <ul class="ds_no-bullets">
                <li><a href="#">crofting law scotland</a></li>
                <li><a href="#">crofting register</a></li>
                <li><a href="#">crofting grants</a></li>
            </ul>
        </aside>
    </div>
</main>

About this pattern

This pattern includes the search results page, the ability to display multiple pages of search results and to navigate between these pages.

Within the pattern:

  • search results may contain a combination of search result layout types
  • users can choose the page they want by picking a page number at the bottom of a search results page, starting at page 1
  • each individual page number contains 10 search results
  • the page number the user is on is always highlighted
  • any links to related search terms may appear at the end

When there are no results found

If a user has searched for something and there are no results to display, give the user some hints for how to improve their search.

Sample HTML

<main class="ds_layout  ds_layout--search-results  ds_search-results">
    <div class="ds_layout__header">
        <div class="ds_site-search">
            <form role="search" class="ds_site-search__form">
                <label class="ds_label  visually-hidden" for="site-search">Search</label>
                <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
                    <input name="q" required="" id="site-search" class="ds_input  ds_site-search__input" type="search" value="xyzuhsdfhbjh" placeholder="Search" autocomplete="off" />
                    <button type="submit" class="ds_button  js-site-search-button">
                        <span class="visually-hidden">Search</span>
                        <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="ds_layout__content">
        <section id="search-results" class="ds_search-results" aria-labelledby="search-results__heading">
            <h2 class="visually-hidden" id="search-results__heading">Search results</h2>
            <div class="ds_no-search-results">
                <p><strong>There are no matching results.</strong></p>
                <p>Improve your search results by:</p>
                <ul>
                    <li>double-checking your spelling</li>
                    <li>using fewer keywords</li>
                    <li>searching for something less specific</li>
                </ul>
            </div>
        </section>
    </div>
</main>

When the search term may be misspelled

If a user has searched for something that is identified as a potential misspelling, give the user the option to perform the search again with the suggested correct spelling.

Sample HTML

<main class="ds_layout  ds_layout--search-results  ds_search-results">
    <div class="ds_layout__header">
        <div class="ds_site-search">
            <form role="search" class="ds_site-search__form">
                <label class="ds_label  visually-hidden" for="site-search">Search</label>
                <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
                    <input name="q" required="" id="site-search" class="ds_input  ds_site-search__input" type="search" value="crfting" placeholder="Search" autocomplete="off" />
                    <button type="submit" class="ds_button  js-site-search-button">
                        <span class="visually-hidden">Search</span>
                        <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
                    </button>
                </div>
            </form>
        </div>
        <nav class="ds_search-suggestions" aria-label="Alternative search suggestions">
            <p>Also showing results for <a href="#">crofting</a><br />
            Show results only for <a href="#">crfting</a></p>
        </nav>
    </div>
    <div class="ds_layout__content">
        <h2 class="ds_search-results__title"><span class="ds_search-results__title-count">3</span> results for <span class="ds_search-results__title-query">crfting</span> or <span class="ds_search-results__title-query">crofting</span></h2>
        <ol class="ds_search-results__list" data-total="3">
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting community right to buy</a>
                </h3>
                <p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
                <dl class="ds_metadata ds_search-result__metadata  ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Policy</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
                </h3>
                <p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation paper</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">28 August 2017</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
                </h3>
                <p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation analysis</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">1 September 2017</dd>
                    </div>
                </dl>
            </li>
        </ol>
    </div>
</main>

When additional results are promoted

Specific results can be placed at the top of the search results and labelled to show that they are distinct from the others.

Promoted results do not count towards the total number of results.

If search results span multiple pages then promoted results should only appear on page one.

Sample HTML

<main class="ds_layout  ds_layout--search-results  ds_search-results">
    <div class="ds_layout__header">
        <div class="ds_site-search">
            <form role="search" class="ds_site-search__form">
                <label class="ds_label  visually-hidden" for="site-search">Search</label>
                <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
                    <input name="q" required="" id="site-search" class="ds_input  ds_site-search__input" type="search" value="crofting" placeholder="Search" autocomplete="off" />
                    <button type="submit" class="ds_button  js-site-search-button">
                        <span class="visually-hidden">Search</span>
                        <svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="ds_layout__content">
        <h2 class="ds_search-results__title"><span class="ds_search-results__title-count">3</span> results for <span class="ds_search-results__title-query">crofting</span></h2>
        <ol class="ds_search-results__list" data-total="5">
            <li class="ds_search-result  ds_search-result--promoted">
                <div class="ds_search-result--promoted-content">
                    <header class="ds_search-result--promoted-title">Recommended</header>
                    <h3 class="ds_search-result__title">
                        <a class="ds_search-result__link" href="#">Crofting community right to buy</a>
                    </h3>
                    <p class="ds_search-result__summary">Information and guidance regarding the <mark>crofting</mark> community right to buy.</p>
                    <dl class="ds_metadata ds_search-result__metadata  ds_metadata--inline">
                        <div class="ds_metadata__item">
                            <dt class="ds_metadata__key visually-hidden">Format</dt>
                            <dd class="ds_metadata__value">Policy</dd>
                        </div>
                    </dl>
                </div>
            </li>
            <li class="ds_search-result  ds_search-result--promoted">
                <div class="ds_search-result--promoted-content">
                    <header class="ds_search-result--promoted-title">Recommended</header>
                    <h3 class="ds_search-result__title">
                        <a class="ds_search-result__link" href="#">Crofting consultation 2017</a>
                    </h3>
                    <p class="ds_search-result__summary">We are seeking the views of crofters, and those with an interest, on the pathway of any potential new legislation to reform <mark>crofting</mark> law.</p>
                    <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                        <div class="ds_metadata__item">
                            <dt class="ds_metadata__key visually-hidden">Format</dt>
                            <dd class="ds_metadata__value">Publication - Consultation paper</dd>
                        </div>
                        <div class="ds_metadata__item">
                            <dt class="ds_metadata__key visually-hidden">Date</dt>
                            <dd class="ds_metadata__value">28 August 2017</dd>
                        </div>
                    </dl>
                </div>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting Elections 2017: consultation responses analysis</a>
                </h3>
                <p class="ds_search-result__summary">Analysis of the responses to the <mark>Crofting</mark> Elections 2017 consultation.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Consultation analysis</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">1 September 2017</dd>
                    </div>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Crofting Commision</a>
                </h3>
                <p class="ds_search-result__summary">Elections regulations put before parliament.</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">News</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">25 October 2016</dd>
                    </div>
                </dl>
                <dl class="ds_search-result__context">
                    <dt class="ds_search-result__context-key">Part of:</dt>
                    <dd class="ds_search-result__context-value"><a href="#">Equality and rights</a></dd>
                </dl>
            </li>
            <li class="ds_search-result">
                <h3 class="ds_search-result__title">
                    <a class="ds_search-result__link" href="#">Proposals on secondary legislation the Land Reform (Scotland) Act 2003 part three: crofting community right to buy as amended by the Community Empowerment (Scotland) Act 2015: consultation</a>
                </h3>
                <p class="ds_search-result__summary">Consultation relating to secondary legislation for the Land Reform (Scotland) Act 2003 part three, <mark>crofting</mark> community right to buy as amended by the Community ...</p>
                <dl class="ds_metadata ds_search-result__metadata ds_metadata--inline">
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Format</dt>
                        <dd class="ds_metadata__value">Publication - Research and Analysis</dd>
                    </div>
                    <div class="ds_metadata__item">
                        <dt class="ds_metadata__key visually-hidden">Date</dt>
                        <dd class="ds_metadata__value">1 September 2016</dd>
                    </div>
                </dl>
                <dl class="ds_search-result__context">
                    <dt class="ds_search-result__context-key">Part of:</dt>
                    <dd class="ds_search-result__context-value"><a href="#">Farming and rural</a></dd>
                </dl>
            </li>
        </ol>
    </div>
</main>

Site search

Why we use this pattern

The design of the pattern helps the user to browse their search results, or to refine their search term if the search results do not meet their needs.

Website analytics

Many analytics tools offer out of the box tracking for site search. The setup below covers more complex tracking to understand which search result was interacted with from a search results page, and how additional interactive elements are being used.

Search results should be tracked in order to understand if internal search engines are providing useful results to users. Tracking works through the query being available from the page URL, the click text, click URL and a data attribute showing the result’s position.

Clicks to the suggested terms in the ‘did you mean…’ content are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.

Pagination is tracked using the data attribute with the number of the results page clicked.

Promoted results are tracked using the page URL, the click text, click URL and a data attribute showing the result’s position in the list of promoted results.

Suggested related search terms are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute.

The data attributes are added automatically by the Design System’s ‘tracking’ script.

Where the site search is being used on a single-page app or it is not possible to put the search query in to the URL, the query could be included in the dataLayer for the page.

Accessibility

Search suggestions use WAI-ARIA attributes to give more context for screen reader users. They include:

  • link text for each suggestion being overwritten with a more descriptive aria-label
  • text “Did you mean?” being hidden to avoid duplication in the links
  • suggestions being wrapped in a nav element with a descriptive aria-label Supporting evidence: mygov.scot accessibility review, March 2019.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top