Global search – faceted search launchpad
This is the global search bar. It is intended to be placed at the head of every page where search is relevant, which will be most pages on UCAS sites.
Example syntax
<!-- START global search component -->
<div class="context-bar__search">
<form action="https://www.ucas.com/search/site" method="get" data-global-search="true"
data-global-search-disabled="undergraduate2018, postgraduate2018"
data-global-search-domain="https://s3-eu-west-1.amazonaws.com/ucas-da-ui-framework-2016-01-28/UI/develop"
data-global-search-settings='{"plugins":{"qips":{"label":"QIPs","placeholder":"Find qualification information profiles","weight":5,"domain":"https://qips.ucas.com","path":"/search","args":{"keywords":"{keywords}"},"tier":0}}}'
class="global-search--fancy">
<div class="form-item form-item__search_field form-item--plain">
<label for="keywords">Search field:</label>
<input type="search" id="keywords" name="keywords" value="Preset keyword" placeholder="Search site sections by keyword" class="global-search__keyword">
<input type="submit" value="Submit" title="Submit" class="global-search__submit">
</div>
</form>
</div>
<!-- END global search component -->
Form action
The action attribute should be the default location for the "dumb" search for the site you are on. This is a fallback in case the user does not have Javascript available.
Form data-global-search
The data-global-search attribute should contain the URL where the search is intended to be run in a production environment. The reason that this needs to be specified is so that on development URLs, we don't want to be making changes to the configuration, so this attribute allows the search code to know what the production URL is even if you're not using it on the current production URL.
This is used by the search code so that it knows what drop-downs to use as defaults. For example, if the user is within the UCAS.com events section, the drop-downs will always show the relevant event search, even if the user chose other options on a previous page, because this unifies the search experience and makes it more convenient for the end user.
Input type search
Make sure that the value attribute contains any keywords that the user has already searched for. If left blank, the placeholder will be filled in automatically by the search system. However, if the user has already provided search terms, this element should contain these terms to make it more convenient for the user.