Global search
Global search
The global search is accessible from anywhere on the page by clicking "search" on the right hand side of the header. The search field features an autocomplete list with a maximum of 5 suggestions. The list can be navigated with either arrow keys or the mouse. A clear button allows for quick emptying of any present value.
<section class="global-search">
<form class="global-search__search-form js-global-search-form" action="/sok/" method="get">
<div class="global-search__input-wrap">
<input type="text" class="global-search__robot js-global-search-robot" aria-hidden="true" id="GlobalSearchRobot" name="GlobalSearchRobot" value="" title="robot" tabindex="-1">
<input type="text" class="global-search__input js-global-search-input" autocomplete="off" name="SearchText" id="searchpage-search" aria-live="assertive" aria-atomic="true" placeholder="Søk i nettstedet" style="padding-right: 60px;">
<div class="global-search__actions">
<button type="button" class="global-search__clear-btn global-search__btn display--none">
<svg class="global-search__icon-clear global-search__icon" aria-labelledby="title" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" focusable="false">
<title>Tøm</title>
<g transform="scale(4, 4)">
<polygon points="24,22.4 13.6,12 24,1.6 22.4,0 12,10.4 1.6,0 0,1.6 10.4,12 0,22.4 1.6,24 12,13.6 22.4,24 "/>
</g>
</svg>
</button>
<button type="submit" class="global-search__submit-btn global-search__btn js-global-search-submit global-search__btn--empty">
<svg aria-labelledby="title" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" focusable="false" class="global-search__icon-search global-search__icon">
<title>Søk</title>
<g transform="scale(4, 4)">
<path d="M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9, 6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2, 9.1z M24,22.4l-7.7-7.7 c1.3-1.6,1.9-3.6, 1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0, 9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7, 5.6-1.9l7.7,7.7L24,22.4z"/>
</g>
</svg>
</button>
</div>
</div>
<ul class="global-search__suggestions" aria-hidden="true"></ul>
<span class="global-search__live-count show-for-sr" aria-live="assertive" aria-atomic="true"></span>
<span class="span.global-search__live-focus show-for-sr" aria-live="assertive" aria-atomic="true"></span>
</form>
</section>
<GlobalSearch
SearchVisibility = this.props.SearchVisibility
ClearVisibility = this.props.ClearVisibility
Translations = this.props.Translations
Query = this.Query
input = {this.input}
robot = {this.robot}
clear = {this.clear}
submit = {this.submit}
actions = {this.actions}
form = {this.form}
count = {this.count}
focus = {this.focus}
suggestions = {this.suggestions}
values = {this.values}
listFocus = {this.listFocus}
typeChange = {this.typeChange}
addFocus = {this.addFocus}
addHover = {this.addHover}
clearList = {this.clearList}
submitForm = {this.submitForm}
clearInput = {this.clearInput}
removeHover = {this.removeHover}
populateList = {this.populateList}
suggestionClick = {this.suggestionClick}
fetchSuggestions = {this.fetchSuggestions}
navigateSuggestions = {this.navigateSuggestions}>