satu lagi fitur baru yang terdapat pada HTML 5 , yaitu datalist  <datalist> , Para developer web dapat dengan mudah membuat native autocomplete dropdowns  , jika dulu harus bersusah payah bergelut dengan Ajax Jquery, Sekarang HTML5 sudah menyediakan fitur datalist yang fungsinya seperti autocomplete :

Amazing Kalkulator dengan HTML5 dan CSS3

HTML5 Datalist

Element <datalist> , digunakan untuk memberikan pilihan terhadap user , bahasa kerennya autocomplete list , sehingga memudahkan user untuk mendapatkan apa yang ingin dicarinya , untuk mendefenisikannya <datalist> diisi dengan value pada elemen <option>  berikut contoh datalist

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>

<datalist> dipanggil dengan attribut  id  pada tag <datalist>  untuk menghubungkannya pada tag <input> dibutuhkan attribut list,

<input type="text" list="languages"/>

Jika semua sudah benar, maka fitur autocomplete akan muncul pada tag <input>

 Untuk Complete Script :

<input type="text" list="languages"/>
<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>

Demo Download