使用 datalist 提供 Auto Complete | 次世代 Hugo

若要為 <input> 提供 Auto Complete，HTML 已經內建提供 <datalist> 可直接使用，不必另外使用 Package。

Version

HTML 5

datalist

當在 <input> 輸入時，可根據輸入提供 auto complete。

<template>
  <input list='browsers'>
  <datalist id='browsers'>
    <option value='Chrome'/>
    <option value='FireFox'/>
    <option value='Safari'/>
  </datalist>
</template>

• 在 <input> 下方建立 <datalist>，以 <option> 提供 auto complete 資料，並以 id 為其命名
• 在 <input> 以 list 使用 <datalist> 的 id

Conclusion

• <datalist> 需提供 id，而 <input> 要使用 <list> 綁定 id

Reference

W3Schools, HTML datalist Tag