Search results

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

Open this example in a new window

Sample HTML

<div class="ds_search-results">

<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="text" placeholder="Search" autocomplete="off" data-form="textinput-search-term" />

            <button type="submit" class="ds_button  ds_button--icon-only  js-site-search-button" data-button="button-search-submit">
                <span class="visually-hidden">Search</span>
                <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg>
            </button>
        </div>
    </form>
</div>

<nav id="suggestions" class="ds_search-suggestions" aria-label="Alternative search suggestions">
    <span aria-hidden="true">Did you mean:</span>

    <ul>
        <li>
            <a data-search="suggestion-result-1/1" aria-label="Did you mean 'crafting'?" href="#">crafting</a>
        </li>
    </ul>
</nav>

<section id="search-results" class="ds_search-results">

    <h2 class="visually-hidden">Search results</h2>

    <p class="ds_search-results__count js-search-results-count"><b>68</b> results</p>

    <ol id="search-results-list" class="ds_search-results__list" data-search-term="crofting">
        <li class="ds_search-result">
            <header class="ds_search-result__header">
                <dl class="ds_search-result__metadata  ds_metadata  ds_metadata--inline">
                    <span class="ds_metadata__item">
                        <dt class="ds_metadata__key  visually-hidden">Type</dt>
                        <dd class="ds_metadata__value  ds_content-label">Policy</dd>
                    </span>
                </dl>

                <h2 class="gamma  ds_search-result__title">
                    <a class="ds_search-result__link" href="#" data-search="search-result-1/68">Crofting community right to buy</a>
                </h2>
            </header>

            <p class="ds_search-result__summary">Information and guidance regarding the crofting community right to buy.</p>
        </li>

        <li class="ds_search-result">
            <header class="ds_search-result__header">
                <dl class="ds_search-result__metadata  ds_metadata  ds_metadata--inline">
                    <span class="ds_metadata__item">
                        <dt class="ds_metadata__key  visually-hidden">Type</dt>
                        <dd class="ds_metadata__value  ds_content-label">Consultation paper</dd>
                    </span>

                    <span class="ds_metadata__item">
                        <dt class="ds_metadata__key  visually-hidden">Publication date</dt>
                        <dd class="ds_metadata__value">28 Aug 2017</dd>
                    </span>
                </dl>

                <h2 class="gamma  ds_search-result__title">
                    <a class="ds_search-result__link" href="#" data-search="search-result-2/68">Crofting consultation 2017</a>
                </h2>
            </header>

            <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 crofting law.</p>
        </li>

        <li class="ds_search-result">
            <header class="ds_search-result__header">
                <dl class="ds_search-result__metadata  ds_metadata  ds_metadata--inline">
                    <span class="ds_metadata__item">
                        <dt class="ds_metadata__key  visually-hidden">Type</dt>
                        <dd class="ds_metadata__value  ds_content-label">Consultation analysis</dd>
                    </span>

                    <span class="ds_metadata__item">
                        <dt class="ds_metadata__key  visually-hidden">Publication date</dt>
                        <dd class="ds_metadata__value"><time datetime="2016-09-01">01 Sep 2016</time></dd>
                    </span>
                </dl>

                <h2 class="gamma  ds_search-result__title">
                    <a class="ds_search-result__link" href="#" data-search="search-result-3/68">Crofting Elections 2017: consultation responses analysis</a>
                </h2>
            </header>

            <p class="ds_search-result__summary">Analysis of the responses to the Crofting Elections 2017 consultation.</p>
        </li>
    </ol>

    <nav class="ds_pagination" aria-label="Search pages">
        <div class="ds_pagination__load-more">
            <button data-search="pagination-more" class="ds_button">Load more</button>
        </div>

        <ul class="ds_pagination__list">
            <li class="ds_pagination__item" aria-current="page">
                <span class="ds_pagination__link  ds_current">1</span>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-2" class="ds_pagination__link">2</a>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-3" class="ds_pagination__link">3</a>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-4" class="ds_pagination__link">4</a>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-5" class="ds_pagination__link">5</a>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-6" class="ds_pagination__link">6</a>
            </li>

            <li class="ds_pagination__item">
                <a href="#" data-search="pagination-7" class="ds_pagination__link">7</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 href="#" data-search="pagination-next" class="ds_pagination__link  ds_pagination__link--text">Next</a>
            </li>
        </ul>
    </nav>
</section>
</div>

About this pattern

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

Within the pattern:

  • users can choose the page they want by picking a page number at the bottom of a search result page, starting at page 1
  • each individual page number contains 10 search results
  • the page number the user is on is always highlighted

A maximum number of 7 page numbers are shown at the bottom of a page of search results, but the user can select pages outwith these 7 by choosing the … (ellipsis) symbol.

An option to select ‘previous’ page appears to the left of the 7 numbers and an option to select ‘next’ page on the right. The current page number always appears in the URL, for example https://www.mygov.scot/search/?q=brexit&cat=sitesearch&page=2

On a mobile, a ‘Load more’ button is shown instead of a list of page numbers.

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, for example data-search-result="search-result-2/68", which shows the user clicked the second result from 68 search results

Clicks to the suggested terms in the “did you mean…” component are tracked through the page URL (which contains the original search query), the click text, the click URL and a data attribute, for example data-search="suggestion-result-1/1", which shows that the suggested alternate search term was the first available from a total of 1 suggested search terms.

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.

Pagination is tracked using the data attribute with the number of the results page clicked, for example data-search="'pagination-1".

Accessibility features

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