Membuat form Autocomplete dengan DATALIST element (HTML5) ~ Bariklana ngeBlog

DATALIST merupakan element baru yang ada di HTML5. Fungsi dan cara penggunaan datalist sangat mirip dengan element select, hanya saja hasilnya lebih mirip input text yang disertai dengan AJAX.

Contoh penggunaan datalist bisa dilihat di source code berikut:

<label>Select your preferred code editor:</label>
<input id="txt_ide" list="ide" type="text">
<datalist id="ide">
<option value="Brackets"></option>
<option value="Coda"></option>
<option value="Dreamweaver"></option>
<option value="Espresso"></option>
<option value="jEdit"></option>
<option value="Komodo Edit"></option>
<option value="Notepad++"></option>
<option value="Sublime Text 2"></option>
<option value="Taco HTML Edit"></option>
<option value="Textmate"></option>
<option value="Text Pad"></option>
<option value="TextWrangler"></option>
<option value="Visual Studio"></option>
<option value="VIM"></option>
<option value="XCode"></option>
</datalist>

Hasil Dari Sorce Code tersebut adalah sebagai berikut :

Select your preferred code editor:

Semoga bermanfaat.

Sumber : http://www.humayraa.com/tutorial-html5-membuat-form-autocomplete-dengan-datalist-element/