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 |
| 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 | () | null | Kaller .focus() på <input> |
| setSuggestions | Array |
void | Setter forslag til søkeresultater |
Eventer
Ref. Stenciljs.com
| Event | Beskrivelse |
|---|---|
| focusin | Åpner søkeforslag |
| focusout | Lukker søkeforslag |
| keydown | Piltaster for å navigere i søkeforslag |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-search
placeholder="Hva leter du etter?"
guid="search-guid"
input-name="q"
>
</lk-search><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);
timeout = setTimeout( () => {
Promise.resolve(
fetch(`/data/search.json?q=${searchText}`)
.catch(error => {
console.log(error);
})
.then(data => {
Promise.resolve(data.json()).then(result => {
if (searchText) {
search.setSuggestions(result);
} else {
search.setSuggestions([]);
}
});
})
);
}, 750);
})
})();
</script>