HTML Academy · Ders

Otomatik Tamamlama için Datalist

datalist öğesiyle girdi değerleri önerin

Otomatik Tamamlama için Datalist, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

datalist Nedir?

<datalist> öğesi, bir <input> için önceden tanımlanmış öneriler listesi sağlar:

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

veri listesi ile select karşılaştırması

<datalist> ile <select> arasındaki temel fark:

veri listesi — serbest metin + öneriler (kullanıcı istediği şeyi yazabilir)
select — sınırlı seçim (kullanıcı listeden seçim yapmak zorundadır)

Girdiyi sınırlamak yerine değerler önermek istediğinizde veri listesini kullanın.

veri listesini girdiye bağlama

<input> üzerindeki list özniteliği, <datalist> öğesinin id değeriyle eşleşmelidir:

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

Farklı Girdi Türleriyle veri listesi

<datalist> birçok girdi türüyle çalışır:

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

veri listesinde option label

Veri listesindeki seçenekler, görünür bir etikete ve gönderilen bir değere sahip olabilir:

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

Önerileri Filtreleme

Kullanıcı yazdıkça tarayıcı önerileri filtreler:

Eşleştirme algoritması tarayıcıya göre değişir
Bazı tarayıcılar metnin başlangıcından, diğerleri ise dizenin herhangi bir yerinden eşleştirir
Tarayıcının filtreleme davranışını denetleyemezsiniz
Özel filtreleme için ARIA içeren özel bir otomatik tamamlama bileşeni oluşturun

JavaScript ile Dinamik veri listesi

Veri listesi seçeneklerini dinamik olarak güncelleyin:

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

veri Listesi Erişilebilirliği

Veri listeleri için erişilebilirlik konuları:

Ekran okuyucular önerileri bir liste kutusu olarak duyurur
Kullanıcılar ok tuşlarıyla öneriler arasında gezinebilir
Girdi hâlâ serbest metni kabul eder — doğrulamanın bunu ele aldığından emin olun

Tarayıcı Desteği Hakkında Notlar

Veri listeleri için tarayıcı desteği iyidir, ancak bazı farklılıklar vardır:

Chrome, Edge, Firefox: tam destek
Safari: Safari 12.1 ve sonraki sürümlerden itibaren desteklenir
Mobil tarayıcılar: çoğu önerileri gösterir, ancak kullanıcı arayüzleri farklılık gösterir
Veri listesine güvenmeden önce her zaman hedef tarayıcılarda sınayın

veri Listesinin Kullanılmaması Gereken Durumlar

Veri listesi şu durumlarda ideal değildir:

Katı doğrulamaya ihtiyacınız varsa (kullanıcı listeden seçim yapmak zorundaysa)
Özel seçenek biçimlendirmesine ihtiyacınız varsa (görünümün tamamını tarayıcı denetler)
Gruplamaya ihtiyacınız varsa (optgroup, veri listesinde desteklenmez)

Bu durumlarda ARIA içeren özel bir otomatik tamamlama bileşeninde role="combobox" kullanın.

veri listesi ile otomatik tamamlamalı arama girdisinin karşılaştırması

Veri listesini otomatik tamamlamalı arama girdisiyle karşılaştırın:

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

Hızlı Kontrol

Bir girdiyi veri listesi öğesine nasıl bağlarsınız?

Özet: veri listesi

Veri listelerinin temel özellikleri:

<datalist id> + <input list> — eşleşen id/list değerleriyle bağlanır
Kullanıcı serbestçe yazabilir veya bir öneri seçebilir
Seçimin sınırlı olması gerektiğinde <select> kullanın
Metin, aralık, renk ve diğer girdi türleriyle çalışır
Kullanıcı yazdıkça öneriler filtrelenir

Sıkça Sorulan Sorular

“Otomatik Tamamlama için Datalist” dersi ücretsiz mi?

Evet — “Otomatik Tamamlama için Datalist” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Otomatik Tamamlama için Datalist” dersinde ne öğreneceğim?

datalist öğesiyle girdi değerleri önerin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Otomatik Tamamlama için Datalist” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön