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}>