{"id":4633,"date":"2015-06-01T12:15:38","date_gmt":"2015-06-01T09:15:38","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4633"},"modified":"2017-12-19T13:57:56","modified_gmt":"2017-12-19T11:57:56","slug":"html5-autocomplete-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-autocomplete-example\/","title":{"rendered":"HTML5 AutoComplete Example"},"content":{"rendered":"

In this article I will show you an example on how to create an autocomplete input using HTML5.<\/p>\n

First I will present you what HTML5 added to create autocomplete fields.<\/p>\n

Then we will create a real example, with data loaded from a server request (aJax).<\/p>\n

1. Elements and attributes <\/h2>\n

1.1 The autocomplete attribute<\/h3>\n

IMPORTANT<\/strong> : This attribute is not used to create autocomplete field but to turn off the form autocompletion by the browser …<\/p><\/blockquote>\n

\r\n<form method="post" autocomplete="off" action="post.php">\r\n    <!-- Some form elements ...-->\r\n<\/form>\r\n<\/pre>\n
With the example above, the browser will not try to fill the form elements itself.<\/p>\n
NOTE<\/strong> : This attribute was introduced in IE 5 ! So it’s not from HTML5 …<\/p><\/blockquote>\n
I presented this attribute just to remove any ambiguity.<\/p>\n
[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
1.2 The datalist element<\/h3>\n
HTML5 introduced the datalist<\/code> tag, this is “THE” tag to create autocomplete field.<\/p>\n
The element can contain some option<\/code>.<\/p>\n
The datalist<\/code> has no representation<\/em> if it’s not linked to an input field, for example the code below will show an empty document :<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n    <meta charset="UTF-8">\r\n    <title>HTML5 Autocomplete Example - First<\/title>\r\n<\/head>\r\n<body>\r\n<datalist>\r\n    <option>Paris<\/option>\r\n    <option>London<\/option>\r\n    <option>Brussels<\/option>\r\n    <option>Madrid<\/option>\r\n    <option>Roma<\/option>\r\n    <option>Dublin<\/option>\r\n    <option>Berlin<\/option>\r\n    <option>Bucharest<\/option>\r\n<\/datalist>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\"html5<\/a>
html5 autocomplete example – first<\/figcaption><\/figure>\n
1.3 Link the datalist<\/h3>\n
Then if you link the datalist to an input field you will have an autocomplete field …<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n    <meta charset="UTF-8">\r\n    <title>HTML5 Autocomplete Example - First<\/title>\r\n<\/head>\r\n<body>\r\n<input type="text" list="capitals" \/>\r\n<datalist id="capitals">\r\n    <option>Paris<\/option>\r\n    <option>London<\/option>\r\n    <option>Brussels<\/option>\r\n    <option>Madrid<\/option>\r\n    <option>Roma<\/option>\r\n    <option>Dublin<\/option>\r\n    <option>Berlin<\/option>\r\n    <option>Bucharest<\/option>\r\n<\/datalist>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\"html5<\/a>
html5 autocomplete example – second<\/figcaption><\/figure>
\nVery simple no ?<\/p>\n
Let see a full example.<\/p>\n
2. Full Example<\/h2>\n
In this example we will create an autocomplete field with data retrieved from an Ajax Request.<\/p>\n
2.1 Why jQuery<\/h3>\n
In this example we will use the jQuery library. I inject the library by passing it as a dependency of my code :<\/p>\n
\r\n(function($){\r\n    'use strict';\r\n\r\n})(jQuery);\r\n<\/pre>\n
This allows me to isolate my code, and to show the reader that jQuery is needed, and that my code depends on it …<\/p>\n
This library uses the $<\/code> symbol as a function name.<\/p>\n
In the code I’ve used it 3 times :<\/p>\n