Portalsøk Webkomponent for portalsøk.

Struktur

<lk-search>
  ...
</lk-search>

Wcag

Det kreves litt mer jobb for å støtte skjermlesere. Trenger støtte for: role=combobox, aria-autocomplete=list og aria-controls=""

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
guid string "" <input> sin id= og <label> sin for=
label string "Hva kan vi hjelpe deg med?" <label> sin tekst
placeholder string "Sett inn søke ord" <input> sin placeholder
input-name string "" <input> sin name=
button-text string "Søk" <button> sin tekst
form-action string "#" <form> sin action=
form-method string "POST" <form> sin method=
required boolean false <input> sin required=
suggestions-url string ""
background any "#EBEBEB" Legger til "background: background" i <section> sin style=
submit-handler function(event) (event) => {formSubmit(event)}

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
getFocus () null Kaller .focus()<input>

Eventer

Ref. Stenciljs.com

Event Parameter Beskrivelse
formSubmit ()

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

<lk-search
  label="Hva kan vi hjelpe deg med?"
  placeholder="Skriv inn søkeord"
  guid="portal-search"
  input-name="q"
  button-text="Søk"
  form-action="/"
  form-method="GET"
  required="false"
  suggestions-url="/guide/data/search.json?q=">
</lk-search>

Hvor finner jeg denne koden?