{"id":17036,"date":"2017-05-08T16:15:44","date_gmt":"2017-05-08T13:15:44","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17036"},"modified":"2017-12-19T13:00:10","modified_gmt":"2017-12-19T11:00:10","slug":"html5-datalist-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/","title":{"rendered":"HTML5 Datalist Example"},"content":{"rendered":"<p>HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of suggested options, but without enforcing the user to choose one of them, and allowing him to introduce any other value, <strong>having also an autocomplete feature<\/strong>.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tgm4cmEWcKUikZNn&#8217;]<br \/>\n&nbsp;<br \/>\nFor this example, the following browsers have been used for testing:<\/p>\n<ul>\n<li>Chromium\u00a056.0.2924.76.<\/li>\n<li>Firefox 52.0.1.<\/li>\n<li>Opera 44.0.<\/li>\n<\/ul>\n<p>And, apart from the browser, we will install a web server, running in Linux Mint 18.1.\u00a0<strong>Not for using any server-side language<\/strong>, but\u00a0for a reason we will see later.<\/p>\n<div class=\"tip\"><strong>Tip<\/strong><br \/>\nYou may skip web server installation\u00a0and jump directly to the <a href=\"#section_2\"><strong>beginning of the example<\/strong><\/a> below.<\/div>\n<h2>1. Installing the web server<\/h2>\n<p>As said before, we are not using any server-side language, so we just need a web server, without any interpreter for any language.<\/p>\n<p>For example, we can install Nginx:<\/p>\n<pre class=\"brush:bash\">sudo apt-get update\r\nsudo apt-get install nginx\r\n<\/pre>\n<p>After the installation the web server service should automatically start, and, if we access <code>localhost<\/code> or <code>127.0.0.1<\/code>, we should see the Nginx welcome page.<\/p>\n<h2 id=\"section_2\">2. The datalist element<\/h2>\n<p>In the first moment, just because of the name, we may confuse the <code>datalist<\/code> element with the <code>select<\/code> element. With this second element, well known by every web developer, we define a list of options, for which the user has to choose one, with no chance for selecting any other thing. The <code>datalist<\/code> is similar in the way that we also define a list of options, but the user is not enforced to choose one of them; they are just suggestions of what the user can choose. So with this element, we offer options to the user, but without limiting him.<\/p>\n<p>Another difference with <code>select<\/code> is that a <code>datalist<\/code> needs a text input element. This is actually quite obvious, since for allowing the user to enter a value that may not be in the list, we need a text input, but is something that we have to keep in mind.<\/p>\n<p>Now that we understand the difference with the <code>select<\/code> element and that we have the main idea of when we should use the <code>datalist<\/code>, let&#8217;s see how to use it.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>1_datalist.html<\/em><\/span><\/p>\n<pre class=\"brush:html;highlight:[25,26,33]\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;1 - Datalist element&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        #wrapper {\r\n            width: 40%;\r\n            margin: 0 auto;\r\n        }\r\n        #wrapper h1 {\r\n            text-align: center;\r\n        }\r\n        #wrapper .form-row {\r\n            margin-top: 20px;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=\"wrapper\"&gt;\r\n        &lt;form action=\"#\"&gt;\r\n            &lt;h1&gt;1 - Datalist element&lt;\/h1&gt;\r\n            &lt;div class=\"form-row\"&gt;\r\n                &lt;label for=\"favorite-color\"&gt;Type your favorite color:&lt;\/label&gt;\r\n                &lt;input type=\"text\" id=\"favorite-color\" list=\"color-datalist\"&gt;\r\n                &lt;datalist id=\"color-datalist\"&gt;\r\n                    &lt;option value=\"Blue\"&gt;\r\n                    &lt;option value=\"Purple\"&gt;\r\n                    &lt;option value=\"Black\"&gt;\r\n                    &lt;option value=\"Yellow\"&gt;\r\n                    &lt;option value=\"White\"&gt;\r\n                    &lt;option value=\"Green\"&gt;\r\n                &lt;\/datalist&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"form-row\"&gt;\r\n                &lt;input type=\"submit\" value=\"Submit\"&gt;\r\n            &lt;\/div&gt;\r\n       &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Note that, this HTML, would be perfectly fine if we would delete the <code>datalist<\/code>; would just be a text input and a submit button. Remember that the datalists work together with the text input: a datalist needs a text input, but a text input may not need a datalist.<\/p>\n<p>But, note that the text input has an &#8220;uncommon&#8221; attribute (line 25): <code>list<\/code>. This is, as you probably guessed, to link the datalist to the given text input. The value of this attribute has to be the id of the datalist.<\/p>\n<p>The definition of the datalist, from line 26 to 33, is pretty similar to the <code>select<\/code> element with its options. But see that the datalist doesn&#8217;t have a <code>name<\/code> attribute because, remember, the element that sends the value in the form is the text input, not the datalist.<\/p>\n<p>The following image shows the rendering of this HTML page for Chromium:<\/p>\n<figure style=\"width: 737px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/05\/datalist_chrome.jpg\" alt=\"\" width=\"737\" height=\"306\" \/><figcaption class=\"wp-caption-text\">1. Datalist rendering (Chromium).<\/figcaption><\/figure>\n<p>As we can see, it&#8217;s a normal text input, but with the dropdown list of the values we defined in the datalist. And, if we start typing into the textbox, we will have an autocomplete, with the values that coincide with what we have typed.<\/p>\n<h3>2.1. Styling the input for cross-browser compatibility<\/h3>\n<p>Until here, everything is fine. But, if we open the HTML with Firefox, we will see that the render is quite different:<\/p>\n<figure style=\"width: 559px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/05\/datalist_firefox.jpg\" alt=\"2. Datalist rendering (Firefox).\" width=\"559\" height=\"224\" \/><figcaption class=\"wp-caption-text\">2. Datalist rendering (Firefox).<\/figcaption><\/figure>\n<p>As we can see, Firefox doesn&#8217;t render the arrow for showing the dropdown list. Instead, we have to double click into the text input to show the values defined in the datalist.<\/p>\n<p>This should be considered a problem, because our pages and applications shouldn&#8217;t render and behave in different ways for different browsers. For solving this issue, there would be two options:<\/p>\n<ul>\n<li>Make the arrow appear always.<\/li>\n<li>Make the arrow disappear.<\/li>\n<\/ul>\n<p>Unfortunately, the first one is not possible, because, even if an arrow can be easily added for each browser, there&#8217;s no JavaScript specification for showing the datalist dropdown programatically. This means that we have to live with the second option, making the arrow disappear.<\/p>\n<p>This can be easily achieved with CSS with just a couple of lines:<\/p>\n<pre class=\"brush:css\">\/**\r\n * Remove the arrow in Webkit browsers.\r\n *\/\r\ninput::-webkit-calendar-picker-indicator {\r\n    display: none;\r\n}<\/pre>\n<p>This means that that the arrow displayed for the text inputs that have a datalist associated is defined with the <code>-webkit-calendar-picker-indicator<\/code> pseudo-selector.<\/p>\n<p>To apply it just for datalists, we should declare a class for the text inputs in question, e.g.:<\/p>\n<pre class=\"brush:html;highlight:[4]\">&lt;!-- ... --&gt;\r\n&lt;input type=\"text\"\r\n       id=\"favorite-color\"\r\n       class=\"datalist-autocomplete\"\r\n       list=\"color-datalist\"\r\n       &gt;\r\n&lt;!-- ... --&gt;<\/pre>\n<p>And of course, updating the CSS:<\/p>\n<pre class=\"brush:css\">\/**\r\n * Remove the arrow in Webkit browsers.\r\n *\/\r\n.datalist-autocomplete::-webkit-calendar-picker-indicator {\r\n    display: none;\r\n}<\/pre>\n<h2>3. Loading dynamically the data<\/h2>\n<p>When we want to offer an autocomplete functionality, usually, the data to be loaded is stored somewhere else, like a database or a text file. For this scenarios, we probably have used AJAX in combination with some jQuery plugin for the autocomplete feature.<\/p>\n<p>Using datalists, we just have to use AJAX for this purpose, being a pretty easy task, as we will see in this section.<\/p>\n<p>For the AJAX request, we will use jQuery, since it&#8217;s much more easier, faster and readable than using the native <code>XMLHttpRequest<\/code> object. For this example, the jQuery version 3.2.1 has been used.<\/p>\n<h3>3.1. Setting up the web server<\/h3>\n<p><strong>Note<\/strong>: These steps are just necessary if you want to test the code of this section on your own computer. In real-life scenarios, this should be responsibility of the sysadmin.<\/p>\n<p>For serving our resource, we need a web server. And that web server has to be configured for allowing CORS (Cross-Origin Resource Sharing).<\/p>\n<p>This consists on adding the following line into the Nginx configuration file:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>\/etc\/nginx\/sites-enabled\/default<\/em><\/span><\/p>\n<pre class=\"brush:bash\"># ...\r\n\r\nserver {\r\n    # ...\r\n    add_header 'Access-Control-Allow-Origin' '*';\r\n    # ...\r\n}<\/pre>\n<p>Now, we have to place our JSON\u00a0file (we will see later the content) in the web directory, <code>\/var\/www\/html\/<\/code>, to access it\u00a0file via web browser, instead of locally. In my case, <code>http:\/\/localhost\/colors.json<\/code>.<\/p>\n<p>Finally, we have to fix the permissions for the file:<\/p>\n<pre class=\"brush:bash\">sudo chown www-data:www-data \/var\/www\/html\/colors.json<\/pre>\n<h3>3.2. The code<\/h3>\n<p>First of all, we will define our data model. The simplest option could be to define a JSON file, defining an array of colors:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>colors.json<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">[\r\n    \"Blue\",\r\n    \"Purple\",\r\n    \"Black\",\r\n    \"Yellow\",\r\n    \"White\",\r\n    \"Green\",\r\n    \"Red\",\r\n    \"Magenta\",\r\n    \"Lilac\",\r\n    \"Cyan\",\r\n    \"Fuchsia\"\r\n]\r\n<\/pre>\n<p>In the HTML, we have to include jQuery (from a CDN in this case), and our script; and also remove the current datalist values, leaving it empty:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>2_loading_dynamically_data.html<\/em><\/span><\/p>\n<pre class=\"brush:html;highlight:[6,7,19,20]\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;2 - Loading dynamically data&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"load_data.js\"&gt;&lt;\/script&gt;\r\n    &lt;style&gt;\r\n        &lt;!-- The style... --&gt;     \r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=\"wrapper\"&gt;\r\n        &lt;form action=\"#\"&gt;\r\n            &lt;h1&gt;2 - Loading dynamically data&lt;\/h1&gt;\r\n            &lt;div class=\"form-row\"&gt;\r\n                &lt;label for=\"favorite-color\"&gt;Type your favorite color:&lt;\/label&gt; \r\n                &lt;input type=\"text\" id=\"favorite-color\" list=\"color-datalist\"&gt;\r\n                &lt;datalist id=\"color-datalist\"&gt;\r\n                &lt;\/datalist&gt;\r\n            &lt;\/div&gt;\r\n\r\n            &lt;div class=\"form-row\"&gt;\r\n                &lt;input type=\"submit\" value=\"Submit\"&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>The JavaScript is just about making an AJAX request, and manipulating the DOM, creating the elements for the datalist:<\/p>\n<p><em><span style=\"text-decoration: underline;\">load_data.js<\/span><\/em><\/p>\n<pre class=\"brush:javascript;highlight:[27,28,29,30,32]\">$(document).ready(function() {\r\n    var colorsUrl = 'http:\/\/127.0.0.1\/colors.json';\r\n\r\n    \/**\r\n     * Defines and returns the AJAX request, for later specifiying\r\n     * the handlers for success and failure.\r\n     *\/\r\n    function getAjaxRequest() {\r\n        return $.ajax({\r\n            url: colorsUrl,\r\n            dataType: 'json',\r\n            type: 'GET',\r\n        });\r\n    }\r\n\r\n    \/**\r\n     * Called on AJAX request success, iterates through the response\r\n     * data, creating an \"option\" value for each color, and appending\r\n     * each element into the datalist element defined in the HTML.\r\n     *\/\r\n    function loadDatalist(responseData) {\r\n        var datalist = $('#color-datalist');\r\n\r\n        for (var colorIndex in responseData) {\r\n            color = responseData[colorIndex];\r\n\r\n            var option = $(\r\n                '&lt;option&gt;',\r\n                { value: color }\r\n            );\r\n\r\n            datalist.append(option);\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * Called on AJAX request error.\r\n     *\/\r\n    function handleRequestError(xhr, status) {\r\n        alert('An error occurred in the AJAX request.');\r\n    }\r\n\r\n    getAjaxRequest().done(loadDatalist);\r\n    getAjaxRequest().fail(handleRequestError);\r\n});\r\n<\/pre>\n<p>Apart from all the AJAX stuff, the important thing for us is in the highlighted lines, where we are iterating through each color, and creating the <code>option<\/code> element that will be created in the DOM, inside the specified datalist.<\/p>\n<p>With this, we have a complete autocomplete feature for our forms, with data loaded from the server, in an incredibly easy way!<\/p>\n<h2>4. Summary<\/h2>\n<p>With the datalist element we have seen how easy can be to have an autocompletion feature with HTML5. In this example we have seen how to have a datalist statically, that is, with the options hardcoded in the HTML; and also how to load dynamically from the server, using AJAX in combination with jQuery, being so easy and immediate to load the data from a resource\u00a0in a server.<\/p>\n<h2>5. Download the source code<\/h2>\n<p>This was an example of HTML5 Datalist.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here:\u00a0<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/05\/HTML5DatalistExample.zip\"><strong>HTML5DatalistExample<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of suggested options, but without enforcing the user to choose one of them, and allowing him to introduce any other value, having also an autocomplete feature. &nbsp; &nbsp; &nbsp; &nbsp; &hellip;<\/p>\n","protected":false},"author":160,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-17036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Datalist Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Datalist Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-08T13:15:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Toni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Toni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\"},\"author\":{\"name\":\"Toni\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\"},\"headline\":\"HTML5 Datalist Example\",\"datePublished\":\"2017-05-08T13:15:44+00:00\",\"dateModified\":\"2017-12-19T11:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\"},\"wordCount\":1224,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\",\"name\":\"HTML5 Datalist Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-05-08T13:15:44+00:00\",\"dateModified\":\"2017-12-19T11:00:10+00:00\",\"description\":\"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Datalist Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\",\"name\":\"Toni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"caption\":\"Toni\"},\"url\":\"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Datalist Example - Web Code Geeks - 2026","description":"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Datalist Example - Web Code Geeks - 2026","og_description":"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-05-08T13:15:44+00:00","article_modified_time":"2017-12-19T11:00:10+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Toni","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Toni","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/"},"author":{"name":"Toni","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966"},"headline":"HTML5 Datalist Example","datePublished":"2017-05-08T13:15:44+00:00","dateModified":"2017-12-19T11:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/"},"wordCount":1224,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/","name":"HTML5 Datalist Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-05-08T13:15:44+00:00","dateModified":"2017-12-19T11:00:10+00:00","description":"HTML5, among other things, introduced new features and improvements for the forms. One of these is the datalist element, which allows to define a list of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-datalist-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Datalist Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966","name":"Toni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","caption":"Toni"},"url":"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=17036"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17036\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=17036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=17036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=17036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}