⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Autocomplete Text Input Datalist List Attribute Tutorial

Published : November 16, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to code the list attribute into your input tags and associate them with a datalist that renders an autocomplete feature while people are typing into your HTML5 web form fields. Used for dynamic autocompletion of search fields primarily, and your datlist can be tied to Ajax and PHP to render autocompletion for your database information. 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Form Input Autocomplete datalist Tutorial</h2>
Search: 
<input type="text" name="srch" id="srch" list="datalist1">
<datalist id="datalist1">
  <option value="Canada">
  <option value="China">
  <option value="Mexico">
  <option value="United Kingdom">
  <option value="United States of America">
  <option value="Uruguay">
</datalist>
</body>
</html>
▲