Søkefelt Webkomponent for søk på sider.
Navn Type Verdi
string
boolean
boolean
boolean
boolean
string
boolean
boolean
Slot Skru av/på slot

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
guid string "" <input> sin id= og <label> sin for=
label string "" <label> sin tekst
placeholder string "" <input> sin placeholder
input-name string "" <input> sin name=
hasSuggestions boolean false Gjør det mulig å legge til forslag under live søk
searchButton boolean "" Om søket skal ha en knapp på siden
searchButtonText string "" Setter teksten på søkeknappen
loading boolean "" Viser at listen laster inn
loadingLabel string "Laster inn" Tekst ved venting på forslag(suggestions)
noResultText string "Ingen resultat funnet" Tekst som dukker opp hvis live søket er tomt

Metoder

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

Metode Parameter Retur Beskrivelse
setFocus () void Kaller .focus() på <input>
setSuggestions Array<string>,
Array<[string, string]>		 void <Label, value> array med søke forslag. Lager en liste med forslag til søkeresultater
getValue () string Henter value internt i komponenten
setValue string [string, string] void
getDisplayedValue () string Henter ut verdien som vist til bruker

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot-navn Beskrivelse
label Ekstra innhold i label
description Plasseres under label elementet
checkbox Plass for lk-checkbox som setter disabled når den blir trykket.

SetSuggestions()

SetSuggestions tar inn en string array eller Array med to verdier [string, string]
Hvis du bruker en Array med to verdier så blir strukturen Array[value, displayedValue]. Først element blir brukt i getValue() og andre verdi det som vises til bruker getDisplayedValue().

Eventer

Ref. Stenciljs.com

Dispatch Event Beskrivelse
selectsuggestion Click Event på Elementet som blir trykket på. Se event.detail for verdien
Listen Event Beskrivelse
focusin Åpner søkeforslag
focusout Lukker søkeforslag
keydown Piltaster for å navigere i søkeforslag

Change event *

Det er lagt på en change event når feltet blir tømt intern knapp. Denne går oppover i dom strukturen så kan lyttes til eventet på lk-search.

Eksempler

<form id="searchForm" action="#">
    <lk-search guid="searchTest" id="searchTest" label="Søk med forslag" has-suggestions="true"></lk-search>
</form>
<script>
    (async () => {
        await customElements.whenDefined('lk-search');
        
        const search = document.getElementById("searchTest");
        let timeout;

        search.addEventListener("input", event => {
            const searchText = event.target.value;
            clearTimeout(timeout);
            search.setAttribute('loading', "true");

            timeout = setTimeout(async () => {
                await fetch(`/data/search.json?q=${searchText}`)
                .catch(error => {
                    console.log(error);
                })
                .then(data => data.json())
                .then(result => {
                    if (searchText) {
                        search.setSuggestions(result);
                    }
                })
                .finally(() => {
                    search.removeAttribute('loading');
                });
            }, 750);
        })
    })();
</script>