Search bar

The search bar is used to search pages of the University website.

Once a search term has been entered an additional 'clear' button is shown with a number of different behaviours:

  • The default behavior is to clear the search input field - enabling a new search to be entered.
  • This can be extended to reset any autcomplete suggestions by adding the class clear-icon__autocomplete to the clear button.
  • This can be changed to resubmit the form with a blank search by adding the class clear-icon__resubmit to the clear button.
  • This can be further changed to instead clear any suggested results by adding the class clear-icon__results to the clear button.

Options available

Search bar

The standalone search bar element is the minimum implementaton for a search form.

  • The placeholder text must indicate the scope of what will be searched.
Example
Code 
<!-- Begin pattern: search-bar //-->
    <div class="container">
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="default-search" class="form-control search-box" required type="text" aria-label="Search the University website" maxlength="256" name="search" placeholder="Search the University website">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
<!-- End pattern: search-bar //-->

Search with autocomplete

Suggested search terms can be displayed as a user types. The basic autocomplete suggests a range of alternate search terms.

This example uses an autocomplete script that is linked to the University's main search service. For this example, start typing to see suggestions based on your entered text. The 'clear' button resets the autocomplete as well as clearing the search input field.

Example
Code 
<!-- Begin pattern: search-bar //-->
    <div class="container">
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="autocomplete-search" class="form-control search-box form-control--autocomplete" required type="text" aria-label="Search the University website, use arrow keys to move between suggested search terms" maxlength="256" name="search" placeholder="Search the University website">
                <button class="clear-icon clear-icon__autocomplete" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
<!-- End pattern: search-bar //-->

Search banner

The search banner is used to prominently feature a search form on the page.

  • The search banner may be used on the body section of a webpage.
  • The background colour must either be light grey or light blue. Alternatively a background image with a transparent overlay may be used.
  • There must be an associated heading introducing the search.
  • An optional sub-heading may also be included to give additional context to the search.
  • Placeholder text should be used to indicate the recommended type of search query.
Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner (blue)

The search banner option with a blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue. This example does not include the optional sub heading.

Example

News search

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__blue" >
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search-blue" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon clear-icon__resubmit" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner (constrained)

It is also acceptable to constrain the search banner to a column layout.

  • This must follow the guidelines of the search banner option.
  • The width of the search banner column must be at least the same size as any other adjoining column.
Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
    <div class="container">
        <div class="col-md-8">
        <div class="row">
        <div class="search-bar search-bar__constrained search-bar__blue">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search-constrained" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
            </div>
        </div>
        </div>
    </div>
<!-- End pattern: search-bar //-->

The search banner option can be extended to include additional supporting links, such as a link to an advanced search.

  • This must follow the guidelines of the search banner option.
  • The links must be associated with the search functionality.
  • A suitable heading should be used to introduce the list of links. This is visible to screen readers at all sizes and also functions as a collapsed menu toggle on smaller displays.
  • If the number of links wrap on to more than one line consider condensing this list into groups using the search banner with additional grouped links option.
Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search-links" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
        <!-- Begin pattern: horizontal-list //-->  
        <div class="horizontal-list">
            <h4 class="horizontal-list__toggle" aria-expanded="false">
                <button class="horizontal-list__toggle-button">Additional options</button>
            </h4>
            <ul>
                <li><a href="#">Advanced search</a></li>
            </ul>
        </div>
        <!-- End pattern: horizontal-list //-->  
    </div>
</div>
<!-- End pattern: search-bar //-->

Additional links can be grouped into categories to limit the number that are initially shown. This is useful in situations where the links would otherwise wrap on to more than one line or some links warrant more importance than others.

Example

Find an event

Search through our entire event calendar

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <h2 class="search-bar__heading">Find an event</h2>
        <p class="search-bar__sub-heading">Search through our entire event calendar</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search-group-links" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
        <!-- Begin pattern: horizontal-list //-->  
        <div class="horizontal-list no-margin-bottom">
            <h4 class="horizontal-list__toggle">
                <button class="horizontal-list__toggle-button" aria-expanded="false">Popular searches</button>
            </h4>
            <ul>
                <li><a href="#">Upcoming events</a></li>
                <li><a href="#">Today</a></li>
                <li><a href="#">This week</a></li>
                <li><a href="#">This month</a></li>
                <li><a href="#">All events</a></li>
                <li class="dropdown-wrapper">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-controls="more-options" role="button">More options</a>
                    <ul class="dropdown-menu" id="more-options">
                        <li><a href="#">Events open to the public</a></li>
                        <li><a href="#">Events for staff and students</a></li>
                        <li><a href="#">Lectures</a></li>
                        <li><a href="#">Seminars</a></li>
                        <li><a href="#">Workshops</a></li>
                        <li><a href="#">Chaplaincy events</a></li>
                        <li><a href="#">Music events</a></li>
                        <li><a href="#">Museum events</a></li>
                        <li><a href="#">Theatre events</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- End pattern: horizontal-list //-->  
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner with tag buttons

The search banner option can also be extended to provide suggested search terms in the form of a list of tags.

  • This must follow the guidelines of the search banner option.
  • Placeholder text should be used to indicate the recommended type of search query and the usage of tags.

For this example, search 'St Andrews' to see how the tag buttons are displayed.

Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="news-search" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" name="search" placeholder="Start typing to receive suggested search terms">
                <button class="clear-icon clear-icon__results" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
            <div class="results" aria-live="polite">
                <div class="row">
                    <div class="col-md-12"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner with tag buttons (light blue)

The search banner with tag buttons option with the light blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue.

For this example, search 'St Andrews' to see how the tag buttons are displayed.

Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__blue" >
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="news-search" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" name="search" placeholder="Start typing to receive suggested search terms">
                <button class="clear-icon clear-icon__results" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
            <div class="results" aria-live="polite">
                <div class="row">
                    <div class="col-md-12"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner with results

The search banner can also be amended to include the results immediately rather than navigating to another page.

  • This must follow the guidelines of the search banner option.
  • Placeholder text should be used to indicate the recommended type of search query and that results will be shown.
  • The submit button must not be shown as the search form is automatically triggered as text is entered.

For this example, search the word 'english' to see how the results are displayed.

Example

Course search

Search for all the courses we offer

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <h2 class="search-bar__heading">Course search</h2>
        <p class="search-bar__sub-heading">Search for all the courses we offer</p>
        <form class="dpl-form form-nosubmit" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="form-banner-search-grey" class="form-control search-box" required type="text" aria-label="Start typing to search courses, use arrow keys to move between suggested courses" maxlength="256" name="search" placeholder="Start typing to see courses">
                <button class="clear-icon clear-icon__results" type="reset" aria-label="Reset" value="Reset"></button>
            </div>
            <div class="results results__box" aria-live="polite">
                <div class="row">
                    <div class="col-md-6 left-column"></div>
                    <div class="col-md-6 right-column"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner with results (light blue)

The search banner with results option with the light blue background applied. This is achieved by replacing the class search-bar__grey with search-bar__blue.

For this example, search the word 'english' to see how the results are displayed.

Example

Course search

Search for all the courses we offer

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__blue" >
    <div class="container">
        <h2 class="search-bar__heading">Course search</h2>
        <p class="search-bar__sub-heading">Search for all the courses we offer</p>
        <form class="dpl-form form-nosubmit" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="form-banner-search-blue" class="form-control search-box" required type="text" aria-label="Start typing to search courses, use arrow keys to move between suggested courses" maxlength="256" name="search" placeholder="Start typing to see courses">
                <button class="clear-icon clear-icon__results" type="reset" aria-label="Reset" value="Reset"></button>
            </div>
            <div class="results results__box" aria-live="polite">
                <div class="row">
                    <div class="col-md-6 left-column"></div>
                    <div class="col-md-6 right-column"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Inline search banner

  • The inline search banner may be used on the body section of a webpage.
  • The background colour must be light grey.
  • The inline search banner must not be used directly below the navigation bar pattern.
  • It is recommended that the inline search banner appears directly above the footer pattern if included on the main body of a webpage.
  • There must be an associated inline title introducing the search.
  • Placeholder text should be used to indicate the recommended type of search query.
  • The heading and sub-heading elements must not be used with this option.
  • Additional links must not be used with this option.
Example
Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__grey" >
    <div class="container">
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <span class="input-group-addon search-bar__inline-title">Search posts</span>
                <input id="banner-search-inline" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->

Search banner (background image) - deprecated

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

News search

Search through our entire news archive

Code 
<!-- Begin pattern: search-bar //-->
<div class="search-bar search-bar__image" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-005.jpg);">
    <div class="container">
        <h2 class="search-bar__heading">News search</h2>
        <p class="search-bar__sub-heading">Search through our entire news archive</p>
        <form class="dpl-form" action="" role="search">
            <div class="input-group input-group-lg">
                <input id="banner-search-image" class="form-control search-box" required type="text" aria-label="Search by keyword or phrase" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                <span class="input-group-btn">
                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                        <i class="fa fa-search" title="Search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
<!-- End pattern: search-bar //-->