PricingLoginStart free
HTML Academy · leksjon

Datalist for autofullføring

Foreslå inndata med datalist-elementet

Leksjon 4 av 413 trinn

Datalist for autofullføring er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva er datalist?

<datalist>-elementet gir en liste med forhåndsdefinerte forslag for et <input>:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalist kontra select

Viktig forskjell mellom <datalist> og <select>:

  • datalist – fri tekst + forslag (brukeren kan skrive hva som helst)
  • select – begrenset valg (brukeren må velge fra listen)

Bruk datalist når man vil foreslå verdier uten å begrense inndataene.

Koble datalist til input

list-attributtet på <input> må samsvare med id-en til <datalist>:

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

datalist med ulike input-typer

<datalist> fungerer med mange input-typer:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

option label i datalist

Alternativer i datalist kan ha en synlig label og en innsendt verdi:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

Filtrering av forslag

Nettleseren filtrerer forslagene mens brukeren skriver:

  • Treffalgoritmen varierer mellom nettlesere
  • Noen finner treff fra begynnelsen, mens andre finner treff hvor som helst i strengen
  • Man kan ikke styre nettleserens filtreringsatferd
  • For egendefinert filtrering kan man lage en egendefinert autocomplete-komponent med ARIA

Dynamisk datalist med JavaScript

Oppdater datalist-alternativer dynamisk:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

Tilgjengelighet for datalist

Tilgjengelighetshensyn for datalist:

  • Skjermlesere leser opp forslagene som en listboks
  • Brukere kan navigere i forslagene med piltastene
  • Inndatafeltet godtar fortsatt fri tekst – sørg for at valideringen håndterer dette

Merknader om nettleserstøtte

Nettleserstøtten for datalist er god, men har enkelte særegenheter:

  • Chrome, Edge, Firefox: full støtte
  • Safari: støttet fra og med Safari 12.1+
  • Mobilnettlesere: de fleste viser forslag, men brukergrensesnittet varierer
  • Test alltid i målrettede nettlesere før man baserer seg på datalist

Når datalist ikke bør brukes

Datalist er ikke ideelt når:

  • Man trenger streng validering (brukeren må velge fra listen)
  • Man trenger egendefinert stilsetting av alternativer (nettleseren styrer all utforming)
  • Man trenger gruppering (optgroup støttes ikke i datalist)

I slike tilfeller kan man bruke en egendefinert autocomplete-komponent med ARIA role="combobox".

datalist kontra søkefelt

Sammenlign datalist med et søkefelt med autocomplete:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

Hurtigsjekk

Hvordan kobler man et input til datalist-elementet?

Besvar den i den interaktive leksjonen

Oppsummering: datalist

Det viktigste om datalist:

  • <datalist id> + <input list> – kobles sammen ved at id og list samsvarer
  • Brukeren kan skrive fritt eller velge et forslag
  • Bruk <select> når valget må begrenses
  • Fungerer med text, range, color og andre input-typer
  • Forslagene filtreres mens brukeren skriver
Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
40
Leksjoner
159
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Datalist for autofullføring» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Datalist for autofullføring», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Datalist for autofullføring»?

Foreslå inndata med datalist-elementet Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Datalist for autofullføring»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?

Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Select- og option-rullegardinmenyer
  2. Textarea for tekst over flere linjer
  3. Grupper med avmerkingsbokser og radioknapper
  4. Datalist for autofullføring
← Tilbake til HTML Academy