{"id":2749,"date":"2016-06-28T09:47:12","date_gmt":"2016-06-28T09:47:12","guid":{"rendered":"https:\/\/kiencang.net\/?p=2749"},"modified":"2016-06-28T09:47:12","modified_gmt":"2016-06-28T09:47:12","slug":"the-datalist-trong-html","status":"publish","type":"post","link":"https:\/\/kiencang.net\/the-datalist-trong-html\/","title":{"rendered":"Th\u1ebb datalist trong HTML"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">V\u00ed d\u1ee5<\/h3>\n\n\n\n<p>M\u1ed9t ph\u1ea7n t\u1eed &lt;input&gt; v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc trong &lt;datalist&gt;:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input list=\"browsers\">\n\n&lt;datalist id=\"browsers\">\n&lt;option value=\"Internet Explorer\">\n&lt;option value=\"Firefox\">\n&lt;option value=\"Chrome\">\n&lt;option value=\"Opera\">\n&lt;option value=\"Safari\">\n&lt;\/datalist><\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<input list=\"browsers\">\n\n<datalist id=\"browsers\">\n<option value=\"Internet Explorer\">\n<option value=\"Firefox\">\n<option value=\"Chrome\">\n<option value=\"Opera\">\n<option value=\"Safari\">\n<\/datalist>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d6a7f1f71\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d6a7f1f71\"  type=\"checkbox\" id=\"item-6577d6a7f1f71\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/the-datalist-trong-html\/#Dinh_nghia_va_cach_dung\" title=\"\u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng\">\u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/the-datalist-trong-html\/#Trinh_duyet_ho_tro\" title=\"Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3\">Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/the-datalist-trong-html\/#Su_khac_nhau_giua_HTML_401_va_HTML5\" title=\"S\u1ef1 kh\u00e1c nhau gi\u1eefa HTML 4.01 v\u00e0 HTML5\">S\u1ef1 kh\u00e1c nhau gi\u1eefa HTML 4.01 v\u00e0 HTML5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/the-datalist-trong-html\/#Thiet_lap_CSS_mac_dinh\" title=\"Thi\u1ebft l\u1eadp CSS m\u1eb7c \u0111\u1ecbnh\">Thi\u1ebft l\u1eadp CSS m\u1eb7c \u0111\u1ecbnh<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dinh_nghia_va_cach_dung\"><\/span>\u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Th\u1ebb &lt;datalist&gt; ch\u1ec9 \u0111\u1ecbnh m\u1ed9t danh s\u00e1ch l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc cho ph\u1ea7n t\u1eed &lt;input&gt;.<\/p>\n\n\n\n<p>Th\u1ebb &lt;datalist&gt; s\u1eed d\u1ee5ng t\u00ednh n\u0103ng \u201cautocomplete \u2013 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n\u201d cho ph\u1ea7n t\u1eed &lt;input&gt;. Ng\u01b0\u1eddi d\u00f9ng s\u1ebd th\u1ea5y danh s\u00e1ch l\u1ef1a ch\u1ecdn x\u1ed5 xu\u1ed1ng khi h\u1ecd nh\u1eadp d\u1eef li\u1ec7u.<\/p>\n\n\n\n<p>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh list (danh s\u00e1ch) c\u1ee7a ph\u1ea7n t\u1eed input \u0111\u1ec3 r\u00e0ng bu\u1ed9c n\u00f3 c\u00f9ng v\u1edbi ph\u1ea7n t\u1eed &lt;datalist&gt;.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Trinh_duyet_ho_tro\"><\/span>Tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c con s\u1ed1 trong b\u1ea3ng ch\u1ec9 ra phi\u00ean b\u1ea3n tr\u00ecnh duy\u1ec7t \u0111\u1ea7u h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 cho th\u1ebb .<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Th\u1ebb<\/th><th>&nbsp;Chrome<\/th><th>&nbsp;IE<\/th><th>&nbsp;FireFox<\/th><th>&nbsp;Safari<\/th><th>&nbsp;Opera<\/th><\/tr><tr><td>&lt;datalist&gt;<\/td><td>20.0<\/td><td>10.0<\/td><td>4.0<\/td><td>Kh\u00f4ng h\u1ed7 tr\u1ee3<\/td><td>9.0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Su_khac_nhau_giua_HTML_401_va_HTML5\"><\/span>S\u1ef1 kh\u00e1c nhau gi\u1eefa HTML 4.01 v\u00e0 HTML5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Th\u1ebb &lt;datalist&gt; l\u00e0 th\u1ebb m\u1edbi trong HTML5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thiet_lap_CSS_mac_dinh\"><\/span>Thi\u1ebft l\u1eadp CSS m\u1eb7c \u0111\u1ecbnh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t s\u1ebd hi\u1ec3n th\u1ecb ph\u1ea7n t\u1eed &lt;datalist> v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>datalist {\ndisplay: none;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>V\u00ed d\u1ee5 M\u1ed9t ph\u1ea7n t\u1eed &lt;input&gt; v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc trong &lt;datalist&gt;: K\u1ebft qu\u1ea3: \u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng Th\u1ebb &lt;datalist&gt; ch\u1ec9 \u0111\u1ecbnh m\u1ed9t danh s\u00e1ch l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc cho ph\u1ea7n t\u1eed &lt;input&gt;. Th\u1ebb &lt;datalist&gt; s\u1eed d\u1ee5ng t\u00ednh n\u0103ng \u201cautocomplete \u2013 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n\u201d cho ph\u1ea7n t\u1eed &lt;input&gt;. &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[235],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Th\u1ebb datalist trong HTML &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/the-datalist-trong-html\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u1ebb datalist trong HTML &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u00ed d\u1ee5 M\u1ed9t ph\u1ea7n t\u1eed &lt;input&gt; v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc trong &lt;datalist&gt;: K\u1ebft qu\u1ea3: \u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng Th\u1ebb &lt;datalist&gt; ch\u1ec9 \u0111\u1ecbnh m\u1ed9t danh s\u00e1ch l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc cho ph\u1ea7n t\u1eed &lt;input&gt;. Th\u1ebb &lt;datalist&gt; s\u1eed d\u1ee5ng t\u00ednh n\u0103ng \u201cautocomplete \u2013 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n\u201d cho ph\u1ea7n t\u1eed &lt;input&gt;. &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/the-datalist-trong-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-28T09:47:12+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Th\u1ebb datalist trong HTML &#8226; Ki\u1ebfn c\u00e0ng","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:\/\/kiencang.net\/the-datalist-trong-html\/","og_locale":"vi_VN","og_type":"article","og_title":"Th\u1ebb datalist trong HTML &#8226; Ki\u1ebfn c\u00e0ng","og_description":"V\u00ed d\u1ee5 M\u1ed9t ph\u1ea7n t\u1eed &lt;input&gt; v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc trong &lt;datalist&gt;: K\u1ebft qu\u1ea3: \u0110\u1ecbnh ngh\u0129a v\u00e0 c\u00e1ch d\u00f9ng Th\u1ebb &lt;datalist&gt; ch\u1ec9 \u0111\u1ecbnh m\u1ed9t danh s\u00e1ch l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a tr\u01b0\u1edbc cho ph\u1ea7n t\u1eed &lt;input&gt;. Th\u1ebb &lt;datalist&gt; s\u1eed d\u1ee5ng t\u00ednh n\u0103ng \u201cautocomplete \u2013 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1n\u201d cho ph\u1ea7n t\u1eed &lt;input&gt;. &hellip;","og_url":"https:\/\/kiencang.net\/the-datalist-trong-html\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2016-06-28T09:47:12+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"1 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/the-datalist-trong-html\/","url":"https:\/\/kiencang.net\/the-datalist-trong-html\/","name":"Th\u1ebb datalist trong HTML &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2016-06-28T09:47:12+00:00","dateModified":"2016-06-28T09:47:12+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/the-datalist-trong-html\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/the-datalist-trong-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/the-datalist-trong-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Th\u1ebb datalist trong HTML"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/2749"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=2749"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/2749\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=2749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=2749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=2749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}