Search input

Om komponenten

Søkefeltet brukes til navigering på en nettside eller tjeneste. Komponenten består av tre hovedstiler, og tillater en liste med søkeforslag eller søkeresultater.

Avhengigheter

• pkt-input (kun CSS)
• pkt-button
• pkt-icon

Bruk i Vue og React

I Vue sendes hendelsen onSearch sammen med value ved hver endring av søkefeltets input-felt, samt ved klikk på søkeknappen. I React fungerer det tilsvarende, men man må sende inn en funksjon onSearch.

Dersom man ønsker å bruke søkefeltet som en “konvensjonell” form submit kan du sende inn prop action og valgfri prop method (default method er get). Dette kan godt kombineres med onSearch og suggestions men logikken for å sette søketerm etter klikk i forslagene må dere skrive selv.

Søkeforslag, søkeresultat og eventuelle beskjeder vises kun dersom suggestions-prop er sendt inn i komponenten. Den er en array av objekter med denne strukturen:

interface SearchSuggestion {
  title?: string
  text?: string
  href?: string
  onClick?: () => void
}

Presentasjonen er meget fleksibel og du kan velge selv om søkeforslaget skal ha en lenke (href) eller en handling (onClick). Du kan også velge å kun ha title eller kun text, og href og onClick er valgfritt for situasjoner der du skulle ønske å kun vise en tekst. Dersom ingen href eller onClick er valgt vil det i Vue sendes en hendelse onSuggestionClick med medfølgende index-verdi på det som ble klikket, og i React kan man sende inn en funksjon onSuggestionClick som får den samme index-verdien.

Logikk for å vise og skjule suggestions styrer du ved å rett og slett sende inn suggestions-prop med eller uten verdier.

Varianter

CSS-klasser

Props og events