Gå til innholdet
Fristil Designsystem

Suggestion

Serveren skriver feltet og lista. Komponenten filtrerer mens brukeren skriver, tar piltastene, og melder antall treff til skjermlesere.

Nettleserens egen <datalist> gjør noe av det samme, men kan ikke styles, oppfører seg ulikt i hver nettleser, og sier ingenting om hvor mange treff det ble.

// main.ts, kjøres én gang når appen starter
import { defineFsSuggestion } from "@fristil/designsystem/suggestion"
import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/suggestion.css"


defineFsSuggestion()

Slik tar du den i bruk

Section titled “Slik tar du den i bruk”

Markupen

Section titled “Markupen”
const forslag = fs.suggestion({ id: "kommune", count: kommuner.length, help: true })
<fs-suggestion>
  <label class="fs-label" for="kommune">Kommune</label>
  <div class="fs-suggestion__field">
    <input class="fs-input" id="kommune" name="kommune" type="text" role="combobox"
           autocomplete="off" aria-expanded="false" aria-controls="kommune-list"
           aria-autocomplete="list" aria-describedby="kommune-help kommune-status">


    <ul class="fs-suggestion__list" id="kommune-list" role="listbox" hidden>
      <li class="fs-suggestion__option" id="kommune-option-0" role="option"
          aria-selected="false">Bergen</li>
      <li class="fs-suggestion__option" id="kommune-option-1" role="option"
          aria-selected="false">Bodø</li>
    </ul>


    <p class="fs-suggestion__empty" hidden>Ingen treff</p>
    <span class="fs-sr-only" id="kommune-status" role="status" aria-live="polite"
          data-ignore-morph></span>
  </div>
  <p class="fs-help-text" id="kommune-help">Vi fyller ut resten av adressen for deg.</p>
</fs-suggestion>

Feltet er et ekte <input> med name, så det blir med i innsendingen før skriptet har kjørt. Komponenten lagde tidligere hele feltet selv, og da fantes det verken ledetekst eller inndatafelt for en bruker som ventet på JavaScript. Se Markup og oppførsel.

Kommer markupen fra en mal uten JavaScript, er strukturen nok, slik «Ren HTML»-oppskriften viser. Komponenten setter rollene, lager id-ene, skriver for på ledeteksten og aria-controls på feltet, og holder lista lukket til brukeren rører feltet. Hver <li> i lista blir et alternativ; en overskrift i lista trenger role="presentation" for å bli latt i fred. Det serveren har skrevet står, og det komponenten fylte inn settes tilbake om en oppdatering tar det. Statuselementet må stå i markupen: det er innhold serveren sender, og uten det leses ikke antall treff opp.

Alternativet kan bære en annen verdi enn teksten sin med data-value:

<li class="fs-suggestion__option" id="kommune-option-0" role="option" data-value="4601">Bergen</li>

Når noen andre filtrerer

Section titled “Når noen andre filtrerer”

Komponenten skjuler et alternativ når teksten ikke inneholder det som står i feltet. Filtrerer du selv, og filteret ditt er et annet, blir de to uenige, og da er det ditt som skal gjelde. Det sier du med prefiltered.

<fs-suggestion prefiltered>…</fs-suggestion>

Filtrerer du på nøyaktig det samme, altså at teksten inneholder søkeordet, trenger du ingenting: de to er enige, og komponenten skjuler ikke noe du ville vist. Attributtet er for de gangene dere ikke er det:

Ditt filterHva som skjer uten prefiltered
Søk uten diakritikk, bodo finner BodøKomponenten skjuler Bodø, og lista ser tom ut
Søk på en kode som ikke vises, 4601Det samme
Uskarpt søk, oslo finner OsloveienTreffene komponenten ikke kjenner igjen blir borte
Asynkront søkLista blinker mens svaret er underveis

Rendrer du bare treffene, og filteret ditt er smalere enn komponentens, som startsWith, er det derimot trygt: alt du beholder inneholder også søkeordet, så komponenten skjuler ingenting av det. Da er prefiltered likevel riktig for tommeldingen, som forklart under.

Det gjelder like mye i React som i Datastar. I React er det lett å overse, for der er ingen server involvert:

// Søk uten diakritikk. Komponentens eget filter ville skjult Bodø igjen.
const treff = kommuner.filter((k) => utenTegn(k).includes(utenTegn(sok)))


<fs-suggestion prefiltered>
  …
  <ul {...forslag.list}>
    {treff.map((navn, i) => <li {...forslag.options[i]} key={navn}>{navn}</li>)}
  </ul>
</fs-suggestion>

Bygg da fs.suggestion({ id: "kommune", count: treff.length }), ikke med hele lista. count og open avgjør sammen om «Ingen treff» starter synlig, og den vises bare når lista er åpen og count er 0.

Hvem viser «Ingen treff»

Section titled “Hvem viser «Ingen treff»”

Du gjør det. Tommeldingen er en del av det lista viser, og med prefiltered er det du som bestemmer hva den viser. fs.suggestion({ id, count, open }) skriver hidden på den så lenge lista er lukket eller du har treff, så rendrer du feltet på nytt for hvert søk, er det gjort. Komponenten rører den ikke, og det er med vilje: den kan ikke se forskjell på «søket ga ingenting» og «svaret er ikke kommet ennå», og et asynkront søk sa derfor «Ingen treff» i hvert opphold mellom tastetrykket og svaret.

Antall treff leses opp uansett hvem som filtrerte. Det er ikke markup, men en beskjed i [role="status"] til den som ikke ser skjermen, og den kommer når lista faktisk har endret seg, ikke ved tastetrykket. Med prefiltered betyr det: når du har rendret på nytt. Det første antallet leses ikke opp, siden det er utgangspunktet og ikke en endring.

Komponenten tar fortsatt piltastene, markeringen og aria-activedescendant, altså det verken React eller serveren gjør.

prefiltered handler om hva som vises. Skal serveren i tillegg eie om lista er utvidet og hvilket alternativ som er markert, setter du server-controlled ved siden av. Det trenger du sjelden i React: komponenten må få sette aria-selected tilbake, siden en ny rendring nullstiller den.

Før komponenten er registrert

Section titled “Før komponenten er registrert”

fs.suggestion() skriver hidden på lista når den er lukket, så markupen er riktig fra første tegning. Er lista skrevet bar, holder fs-suggestion:not(:defined) .fs-suggestion__list i suggestion.css den skjult til defineFsSuggestion() har kjørt.

Se Markup og oppførsel.

Klasser du kan style

Section titled “Klasser du kan style”
KlasseHva det er
.fs-suggestion__fieldFeltet og lista, som ligger under det
.fs-suggestion__listSelve lista. hidden når den er lukket
.fs-suggestion__optionEtt alternativ. Det markerte har aria-selected="true"
.fs-suggestion__emptyTeksten som vises når ingenting passer
VariabelReserve
--fs-suggestion-max-height18rem
--fs-suggestion-option-paddingvar(--fs-spacing-2) var(--fs-spacing-3)
--fs-suggestion-radiusvar(--fs-spacing-1)
--fs-suggestion-layer30
.fs-suggestion__list {
  --fs-suggestion-max-height: 24rem;
}

Tilgjengelighet

Section titled “Tilgjengelighet”

Feltet er en role="combobox" med aria-autocomplete="list", og lista en role="listbox" med role="option" i seg. Skriver serveren dem med fs.suggestion(), står de i HTML-en før skriptet kjører. Kommer markupen uten, setter komponenten dem i det den registreres.

  • Fokus blir i feltet. Markeringen flyttes med aria-activedescendant, ikke ved å flytte fokus, slik at brukeren kan fortsette å skrive.
  • Antall treff leses opp. Uten det får den som ikke ser skjermen ingen beskjed om at lista snevret seg inn. Teksten skrives av komponenten, og området har derfor data-ignore-morph.
  • Escape lukker lista uten å tømme feltet, og et klikk utenfor gjør det samme.
TastGjør
Pil nedÅpner lista, eller flytter til neste alternativ
Pil oppÅpner lista på det siste alternativet, eller flytter til forrige
EnterVelger det markerte
EscapeLukker lista