Autocomplete

Når brukeren markerer tekstfeltet i ”finn nærmeste-komponentet” kommer det frem forslag om å velge "din posisjon" Samtidig så står det fortsatt "skriv inn sted eller postnummer". Den teksten forsvinner ikke før evt. brukeren velger å skrive i feltet. I det brukeren begynner å skrive inn et postnummer viser vi ikke opp noe forslag på tekst. Dersom brukeren begynner å skrive f eks "Lillehammer" så viser vi autoforslag. Autoforslag kommer opp under tekstfeltet. Brukeren kan velge og skrive hele stedsnavnet eller velge ut ifra forslaget som kommer opp. Når man enten har valgt "din posisjon" eller skrevet inn et "stedsnavn/postnummer" listes det ut under. Navnet på politistasjonen som listes ut er klikkbar. Når man klikker på politistasjonnavnet kommer brukeren til landingssiden for denne spesifikke stasjonen.
  1. Din posisjon
resultater er tilgjengelig. Bruk tastatur eller swipe-bevegelser for å navigere.
<form class="autocomplete">
    <div class="autocomplete__inputgroup">
        <div class="autocomplete__container">
            <label class="autocomplete__label" id="autocomplete_label">Search</label>
            <input type="text" class="autocomplete__input" aria-labelledby="autocomplete_label" placeholder="Søk" />
            <ol role="listbox" class="autocomplete__list list--reset-style">
                <li role="presentation" class="autocomplete__list-item autocomplete__list-item--gps"><a href="#gps" class="link--no-underline" data-id="Din posisjon">Din posisjon</a></li>
            </ol>
        </div>
        <div class="autocomplete__btngroup">
            <button type="submit" class="btn btn--icon autocomplete__search-btn" aria-label="Submit button">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 24 24" class="autocomplete__search-icon">
                    <g>
                        <path d="M2.182 9.024a6.85 6.85 0 0 1 6.842-6.842 6.85 6.85 0 0 1 6.842 6.842 6.85 6.85 0 0 1-6.842 6.843 6.85 6.85 0 0 1-6.842-6.843zM23.767 22.23l-7.644-7.644a8.978 8.978 0 0 0 1.925-5.56 9.024 9.024 0 1 0-9.024 9.024 8.971 8.971 0 0 0 5.555-1.923l7.645 7.645 1.543-1.542z" />
                    </g>
                </svg>
            </button>
        </div>
    </div>
    <input type="hidden" id="find-org-service__services" value="" />
</form>
<Autocomplete Translations={this.props.Translations} 
              SearchTitle={this.state.SearchTitle} 
              onGpsClick={this.onGpsClick} 
              onSubmit={this.onSubmit} 
              Loading={this.state.Loading} 
              Error={this.state.Error} />