PricingLoginStart free
HTML Academy · Lektion

Datalist til autofuldførelse

Foreslå inputværdier med datalist-elementet

Lektion 4 af 413 trin

Datalist til autofuldførelse er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad er datalist?

Elementet <datalist> indeholder en liste med foruddefinerede forslag til 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

Den vigtigste forskel mellem <datalist> og <select>:

  • datalist — fri tekst + forslag, så brugeren kan skrive hvad som helst
  • select — begrænset valg, så brugeren skal vælge fra listen

Brug datalist, når du vil foreslå værdier uden at begrænse inputtet.

Knytning af datalist til input

Attributten list på <input> skal svare til attributten id på <datalist>:

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

datalist med forskellige inputtyper

<datalist> fungerer med mange inputtyper:

<!-- 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

Valgmuligheder i datalist kan have en synlig etiket og en værdi, der sendes:

<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 af forslag

Browseren filtrerer forslagene, mens brugeren skriver:

  • Matchningsalgoritmen varierer fra browser til browser
  • Nogle matcher fra begyndelsen, mens andre matcher hvor som helst i tekststrengen
  • Du kan ikke styre browserens filtreringsadfærd
  • Til brugerdefineret filtrering skal du opbygge en brugerdefineret autofuldførelseskomponent med ARIA

Dynamisk datalist med JavaScript

Opdatér datalists valgmuligheder 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>

Tilgængelighed for datalist

Overvejelser om tilgængelighed for datalist:

  • Skærmlæsere annoncerer forslagene som en listeboks
  • Brugere kan navigere i forslagene med piletasterne
  • Inputtet accepterer stadig fri tekst — sørg for, at valideringen håndterer dette

Bemærkninger om browserunderstøttelse

Browserunderstøttelsen af datalist er god, men har enkelte særheder:

  • Chrome, Edge, Firefox: fuld understøttelse
  • Safari: understøttet fra og med Safari 12.1+
  • Mobilbrowsere: De fleste viser forslag, men brugergrænsefladen varierer
  • Test altid i de browsere, der skal understøttes, før du er afhængig af datalist

Hvornår datalist ikke skal bruges

Datalist er ikke ideel, når:

  • Du har brug for streng validering, så brugeren skal vælge fra listen
  • Du har brug for brugerdefineret styling af valgmuligheder, fordi browseren styrer hele udseendet
  • Du har brug for gruppering, fordi optgroup ikke understøttes i datalist

Brug i disse tilfælde en brugerdefineret autofuldførelseskomponent med ARIA role="combobox".

datalist kontra søgefelt

Sammenlign datalist med et søgefelt med autofuldførelse:

<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 -->

Hurtigt tjek

Hvordan knytter du et input til dets datalist-element?

Besvar den i den interaktive lektion

Opsummering: datalist

Det vigtigste om datalist:

  • <datalist id> + <input list> — knyttes sammen med matchende id/list
  • Brugeren kan skrive frit eller vælge et forslag
  • Brug <select>, når valget skal begrænses
  • Fungerer med tekst, interval, farve og andre inputtyper
  • Forslagene filtreres, mens brugeren skriver
Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
40
Lektioner
159
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Datalist til autofuldførelse” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Datalist til autofuldførelse”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Datalist til autofuldførelse”?

Foreslå inputværdier med datalist-elementet Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Datalist til autofuldførelse”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Select- og option-dropdownmenuer
  2. Textarea til input over flere linjer
  3. Grupper af afkrydsningsfelter og alternativknapper
  4. Datalist til autofuldførelse
← Tilbage til HTML Academy