{"id":16470,"date":"2013-02-18T22:23:43","date_gmt":"2013-02-18T14:23:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16470"},"modified":"2025-04-24T17:03:22","modified_gmt":"2025-04-24T09:03:22","slug":"html5-datalist","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/","title":{"rendered":"A Look into: HTML5 Datalist"},"content":{"rendered":"<p>You probably have experienced this kind of response somewhere on the Web: <strong>when you are typing in an input form, a list of suggestions appears at the bottom<\/strong> of the input.<\/p>\n<p>Over the years, we have relied on JavaScript to create such a function. Today, we can do that with the new <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/html-markup\/datalist.html\">HTML5 <code>&lt;datalist&gt;<\/code><\/a> element. This new HTML5 element allows us to store a list of options that will be shown as users type in the input.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/\" class=\"ref-block__link\" title=\"Read More: A Look into: HTML5 Placeholder Attribute\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Look into: HTML5 Placeholder Attribute<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-placeholder.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15480 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-placeholder.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Look into: HTML5 Placeholder Attribute<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tOne of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>HTML5 List Attribute<\/h2>\n<p>The <code>&lt;datalist&gt;<\/code> can be linked to an <code>&lt;input&gt;<\/code> element using a new HTML5 attribute, <code>list<\/code>. We can use <code>list<\/code> in a few input types like <code>text<\/code> and <code>search<\/code>. However, according to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/HTML\/Element\/input\">Mozilla Developer Network<\/a>, the <code>list<\/code> attribute is not applicable within the following input types: <code>hidden<\/code>, <code>checkbox<\/code>, <code>radio<\/code>, <code>file<\/code>, and <code>button<\/code>.<\/p>\n<p>In the following example, we add a list of cities with <code>&lt;datalist&gt;<\/code> and assign it with an ID attribute, like so:<\/p>\n<pre>\n&lt;datalist id=\"city\"&gt;\n  &lt;option value=\"Adelaide\"&gt;\n  &lt;option value=\"Bandung\"&gt;\n  &lt;option value=\"Bangkok\"&gt;\n  &lt;option value=\"Beijing\"&gt;\n  &lt;option value=\"Hanoi\"&gt;\n  &lt;option value=\"Ho Chi Minh City\"&gt;\n  &lt;option value=\"Hong Kong\"&gt;\n  &lt;option value=\"Jakarta\"&gt;\n  &lt;option value=\"Kuala Lumpur\"&gt;\n  &lt;option value=\"Osaka\"&gt;\n  &lt;option value=\"Seoul\"&gt;\n  &lt;option value=\"Shanghai\"&gt;\n  &lt;option value=\"Singapore\"&gt;\n  &lt;option value=\"Surabaya\"&gt;\n  &lt;option value=\"Sydney\"&gt;\n  &lt;option value=\"Tokyo\"&gt;\n&lt;\/datalist&gt;\n<\/pre>\n<p>To hook the <code>&lt;datalist&gt;<\/code> to an <code>&lt;input&gt;<\/code> element, simply add the <code>list<\/code> attribute and refer to the id attribute, like so:<\/p>\n<pre>\n&lt;input class=\"destination-list\" type=\"text\" placeholder=\"From:\" list=\"city\"&gt;\n&lt;input class=\"destination-list\" type=\"text\" placeholder=\"To:\" list=\"city\"&gt;\n<\/pre>\n<h2>Browser Behavior<\/h2>\n<p>Browsers that support the <code>&lt;datalist&gt;<\/code> element, such as Chrome, Opera, and Firefox, <a href=\"https:\/\/www.hongkiat.com\/blog\/20-awesome-battle-of-the-browsers-artworks\/\">act slightly differently<\/a>.<\/p>\n<p><strong>In Chrome<\/strong>, it will show the options that start with the value typed in. In the example below, Chrome shows values that start with <strong>\u201cs\u201d<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"208\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg\" width=\"500\" alt=\"Chrome browser showing datalist options\"><\/figure>\n<p>On the other hand, clicking on the input <strong>twice<\/strong> will show all the available options, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"396\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser2.jpg\" width=\"500\" alt=\"Chrome browser showing all options\"><\/figure>\n<p><strong>In Opera<\/strong>, focusing on the input form immediately shows all the options, which are then sorted based on the initial letters typed in.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"250\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/opera-browser.jpg\" width=\"500\" alt=\"Opera browser showing datalist options\"><\/figure>\n<p><strong>Firefox<\/strong> will not show anything upon focusing on the input. It will show the options that contain the values as they are typed in. For example, the screenshot below shows Firefox displaying the options that contain the letter <strong>\u201cu\u201d<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"185\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/firefox-browser.jpg\" width=\"500\" alt=\"Firefox browser showing datalist options\"><\/figure>\n<p><strong>Safari<\/strong> currently does not support the <code>&lt;datalist&gt;<\/code> element, and <strong>Internet Explorer<\/strong> is reported to support this element starting from version 10.<\/p>\n<h2>Using HTML5 Datalist with Polyfills<\/h2>\n<p>Several polyfills exist to replicate similar functionality in unsupported browsers. In this post, we will implement the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/miketaylr.com\/code\/datalist.html\">datalist polyfills<\/a> from Michael Taylor. To use it, jQuery and Modernizr are needed for browser feature detection.<\/p>\n<p>As for Modernizr, a few customizations are required. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/download\/\">In the Modernizr download page<\/a>, check the following options:<\/p>\n<ul>\n<li><strong>Input Attributes<\/strong> under the HTML5 section<\/li>\n<li><strong>Modernizr.addTest<\/strong> under the Extensibility section<\/li>\n<li><strong>Modernizr.load<\/strong> under the Extra section<\/li>\n<li><strong>elem-datalist<\/strong> under the Non-core detects<\/li>\n<\/ul>\n<p>Now, open the HTML document where the <code>&lt;datalist&gt;<\/code> element is added and include the Modernizr library just downloaded in the <code>&lt;head&gt;<\/code> section.<\/p>\n<pre>\n&lt;script src=\"js\/modernizr.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>After adding Modernizr, test if the browser supports the datalist element with the script below:<\/p>\n<pre>\n  alert('This browser does not support HTML5 datalist element, so we will load the polyfills');\n}\n<\/pre>\n<p>The script above will show an alert saying <em>\u201cThis browser does not support HTML5 datalist element, so we will load the polyfills\u201d<\/em> when the datalist element is not supported. In Safari, it looks like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"185\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/browser-alert.jpg\" width=\"500\" alt=\"Browser alert missing datalist support\"><\/figure>\n<p>Next, create a new JavaScript file named <code>load.datalist.js<\/code> and add the line below. This will target and run the script on the input that has the <code>list<\/code> attribute.<\/p>\n<pre>\n$('input[list]').datalist();\n<\/pre>\n<p>Lastly, load jQuery, <code>jquery.datalist.js<\/code>, and <code>load.datalist.js<\/code> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/docs\/#load\">using <code>Modernizr.load<\/code><\/a>, as follows:<\/p>\n<pre>\nModernizr.load({\n  test: Modernizr.datalistelem,\n  nope: ['js\/jquery.js', 'js\/jquery.datalist.js', 'js\/load.datalist.js']\n});\n<\/pre>\n<p>Thus, they will be loaded only when the browser does not support the <code>&lt;datalist&gt;<\/code> element.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"396\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/safari-browser.jpg\" width=\"500\" alt=\"Safari browser showing polyfill datalist\"><\/figure>\n<p>That\u2019s it! Now you can view the demo in action or download the source file from the links below.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-datalist\/\">View Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-datalist\/\">Download Source<\/a>\n<\/div>\n<h2>Further Resources<\/h2>\n<p>Below are a few resources to dig into this subject further:<\/p>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/html-markup\/datalist.html\">HTML5 Datalist Element, Predefined options for other controls<\/a> \u2013 W3.org <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/datalist\">HTML5 Datalist<\/a> \u2013 David Walsh <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.raymondcamden.com\/2012\/06\/14\/example-of-a-dynamic-html5-datalist-control\/\">Example of a dynamic HTML5 datalist control<\/a> \u2013 Raymond Camden <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the bottom of the input. Over the years, we have relied on JavaScript to create such a function. Today, we can do that with the new HTML5 &lt;datalist&gt; element.&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Look into: HTML5 Datalist - Hongkiat<\/title>\n<meta name=\"description\" content=\"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the\" \/>\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.hongkiat.com\/blog\/html5-datalist\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look into: HTML5 Datalist\" \/>\n<meta property=\"og:description\" content=\"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-18T14:23:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:03:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look into: HTML5 Datalist\",\"datePublished\":\"2013-02-18T14:23:43+00:00\",\"dateModified\":\"2025-04-24T09:03:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/\"},\"wordCount\":566,\"commentCount\":22,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-datalist\\\/chrome-browser.jpg\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/\",\"name\":\"A Look into: HTML5 Datalist - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-datalist\\\/chrome-browser.jpg\",\"datePublished\":\"2013-02-18T14:23:43+00:00\",\"dateModified\":\"2025-04-24T09:03:22+00:00\",\"description\":\"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-datalist\\\/chrome-browser.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-datalist\\\/chrome-browser.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-datalist\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look into: HTML5 Datalist\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Look into: HTML5 Datalist - Hongkiat","description":"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the","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.hongkiat.com\/blog\/html5-datalist\/","og_locale":"en_US","og_type":"article","og_title":"A Look into: HTML5 Datalist","og_description":"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-02-18T14:23:43+00:00","article_modified_time":"2025-04-24T09:03:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look into: HTML5 Datalist","datePublished":"2013-02-18T14:23:43+00:00","dateModified":"2025-04-24T09:03:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/"},"wordCount":566,"commentCount":22,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/","name":"A Look into: HTML5 Datalist - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg","datePublished":"2013-02-18T14:23:43+00:00","dateModified":"2025-04-24T09:03:22+00:00","description":"You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-datalist\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-datalist\/chrome-browser.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-datalist\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look into: HTML5 Datalist"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4hE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16470"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16470\/revisions"}],"predecessor-version":[{"id":74090,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16470\/revisions\/74090"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16470"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}