Datalist สำหรับการเติมข้อความอัตโนมัติ

datalist คืออะไร

<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 เทียบกับ select

การเชื่อมโยง datalist กับ input

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

datalist กับชนิด input ที่แตกต่างกัน

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

label ของ option ใน datalist

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

การกรองคำแนะนำ

datalist แบบไดนามิกด้วย JavaScript

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

การเข้าถึง datalist

ข้อควรรู้เกี่ยวกับการรองรับของเบราว์เซอร์

กรณีที่ไม่ควรใช้ datalist

datalist เทียบกับช่องค้นหา

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

ตรวจสอบอย่างรวดเร็ว

สรุป: datalist