Datalist automaattista täydennystä varten
Ehdota syöttöarvoja datalist-elementillä
Datalist automaattista täydennystä varten on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mikä datalist on?
<datalist>-elementti tarjoaa ennalta määritettyjen ehdotusten luettelon <input>-elementille:
<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 vs select
<datalist>- ja <select>-elementin keskeinen ero:
- datalist — vapaasti kirjoitettava teksti + ehdotukset (käyttäjä voi kirjoittaa mitä tahansa)
- select — rajattu valinta (käyttäjän on valittava vaihtoehto luettelosta)
Käyttäkää datalist-elementtiä, kun haluatte ehdottaa arvoja mutta ette rajoittaa syötettä.
datalistan yhdistäminen input-elementtiin
<input>-elementin list-attribuutin on vastattava <datalist>-elementin id-attribuutin arvoa:
<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>datalist eri input-tyyppien kanssa
<datalist> toimii monien input-tyyppien kanssa:
<!-- 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 datalistissa
Datalistan vaihtoehdoilla voi olla näkyvä label ja lähetettävä arvo:
<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 -->Ehdotusten suodattaminen
- Hakualgoritmi vaihtelee selaimittain
- Jotkin selaimet hakevat merkkijonon alusta, toiset mistä tahansa kohdasta
- Selaimen suodatustoimintaa ei voi hallita
- Mukautettua suodatusta varten luokaa mukautettu automaattisen täydennyksen komponentti ARIA-määrityksillä
Dynaaminen datalist JavaScriptillä
Päivittäkää datalistan vaihtoehdot dynaamisesti:
<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>datalistan saavutettavuus
Datalistan saavutettavuutta koskevia huomioita:
- Ruudunlukijat ilmoittavat ehdotukset luetteloruudukkona
- Käyttäjät voivat siirtyä ehdotusten välillä nuolinäppäimillä
- Syöte hyväksyy edelleen vapaasti kirjoitettavaa tekstiä — varmistakaa, että validointi käsittelee sen
Huomioita selaintuesta
Datalistan selaintuki on hyvä, mutta siinä on selainkohtaisia eroja:
- Chrome, Edge, Firefox: täysi tuki
- Safari: tuettu Safari 12.1 -versiosta alkaen
- Mobiiliselaimet: useimmat näyttävät ehdotuksia, mutta käyttöliittymä vaihtelee
- Testatkaa aina kohdeselaimilla ennen kuin luotatte datalist-elementtiin
Milloin datalist-elementtiä ei kannata käyttää
Datalist-elementti ei ole ihanteellinen, kun:
- Tarvitsette tiukan validoinnin (käyttäjän on valittava vaihtoehto luettelosta)
- Tarvitsette mukautetun vaihtoehtojen tyylittelyn (selain hallitsee kaikkea ulkoasua)
- Tarvitsette ryhmittelyä (optgroup ei ole tuettu datalist-elementissä)
Käyttäkää näissä tapauksissa mukautettua automaattisen täydennyksen komponenttia, jossa on ARIA role="combobox".
datalist vs search input
Vertailkaa datalist-elementtiä ja autocomplete-toiminnolla varustettua search input -syötettä:
<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 -->Pikatarkistus
Miten input-elementti yhdistetään omaan datalist-elementtiinsä?
Kertaus: datalist
Datalistan perusteet:
<datalist id>+<input list>— yhdistetään toisiaan vastaavilla id- ja list-arvoilla- Käyttäjä voi kirjoittaa vapaasti tai valita ehdotuksen
- Käyttäkää
<select>-elementtiä, kun valintaa on rajoitettava - Toimii text-, range-, color- ja muiden input-tyyppien kanssa
- Ehdotukset suodatetaan käyttäjän kirjoittaessa
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Datalist automaattista täydennystä varten” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Datalist automaattista täydennystä varten”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Datalist automaattista täydennystä varten”?
Ehdota syöttöarvoja datalist-elementillä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Datalist automaattista täydennystä varten”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Select- ja option-elementit: pudotusvalikot
- Textarea monirivistä syötettä varten
- Valintaruutu- ja valintapainikeryhmät
- Datalist automaattista täydennystä varten