{"id":15346,"date":"2011-12-01T10:47:03","date_gmt":"2011-12-01T17:47:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=15346"},"modified":"2012-10-18T14:41:33","modified_gmt":"2012-10-18T21:41:33","slug":"relevant-dropdowns-polyfill-for-datalist","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/relevant-dropdowns-polyfill-for-datalist\/","title":{"rendered":"Relevant Dropdowns: Polyfill for Datalist"},"content":{"rendered":"
The list attribute \/ datalist element of HTML5 forms is pretty cool. As you type in a text input, it shows you a dropdown menu of choices you can pick from. Or you can type in whatever you want. The list attribute alone doesn’t lock you into any specific value. In that way, it’s a bit like a group of radio buttons with an “other” type-in option.<\/p>\n
It’s like this:<\/p>\n
<input type=\"text\" id=\"search\" list=\"states\" placeholder=\"Find U.S. State\">\r\n\t\r\n<datalist id=\"states\">\r\n  <option value=\"Alabama\">\r\n  <option value=\"Alaska\">\r\n  <!-- All the other states -->\r\n<\/datalist><\/code><\/pre>\nand turns out like this:<\/p>\n
\nSupported browser (Firefox 8) showing relevant choices for what has already been typed into the text input.<\/figcaption><\/figure>\nUnfortunately, browser support<\/a> for datalist (at the time of this writing) is limited to Firefox 4+, Opera 10.6+, and the not-yet-released IE 10. It’s reasonable that you’d want WebKit support (and older browser support) for this useful feature. So I made this polyfill. It relies on Modernizr<\/a> for detection and jQuery<\/a> to make it work. <\/p>\n
\nUnsupported browser (Chrome 16) with just about the same functionality.<\/figcaption><\/figure>\nI got it working on iOS 5, IE 6+, Chrome (probably any), and Safari (probably any). Older IE’s don’t have the box shadow but you could style it however you want with CSS.<\/p>\n
Like any polyfill, you start with the correct most-modern markup, and it “just works” in older browsers. This one simulates the dropdown and the selecting of an option from the dropdown. It has keyboard support (up and down arrows and selecting with return) and positions itself correctly even when the window resizes.<\/p>\n
Safari required an extra hack since it claims support of the list attribute and datalist element but it doesn’t actually work. Thus the Modernizr detection is incorrect. So because Safari has these really high browser version numbers that nobody else has, we can just test for that with jQuery.<\/p>\nif (!Modernizr.input.list || (parseInt($.browser.version) > 400))<\/code><\/pre>\nUpdate<\/strong> on the above from Lee Reamsnyder to prevent newer Chromes from false positive:<\/p>\nif (!Modernizr.input.list || (parseInt($.browser.version) > 400 && !window.chrome))<\/code><\/pre>\nHere it is:<\/p>\nView Demo<\/a><\/p>\n
It’s not perfect. It should probably be a plugin and work on multiple inputs. It should look better in IE. The code could probably be optimized. It’s on GitHub<\/a> if you want to download it or fork it or whatever.<\/p>\n
Update (October 2012)<\/h3>\nFixed GitHub Link
\nUpdated to jQuery 1.8
\nUpdated custom :contains method for jQuery 1.8<\/p>\n","protected":false},"excerpt":{"rendered":"
The list attribute \/ datalist element of HTML5 forms is pretty cool. As you type in a text input, it […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-15346","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":187037,"url":"https:\/\/css-tricks.com\/datalists-different-input-types\/","url_meta":{"origin":15346,"position":0},"title":"Datalists for Different Input Types","author":"Chris Coyier","date":"October 26, 2014","format":false,"excerpt":"I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date. Typically, that looks like this:  I've seen variations on this before, like when you\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":292793,"url":"https:\/\/css-tricks.com\/datalist-is-for-suggesting-values-without-enforcing-values\/","url_meta":{"origin":15346,"position":1},"title":"Datalist is for suggesting values without enforcing values","author":"Chris Coyier","date":"July 26, 2019","format":false,"excerpt":"Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of different input types (and modes!), and picking the right one is a great idea. But this little story is about\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-tricks-circles.png?fit=1200%2C553&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-tricks-circles.png?fit=1200%2C553&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-tricks-circles.png?fit=1200%2C553&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-tricks-circles.png?fit=1200%2C553&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-tricks-circles.png?fit=1200%2C553&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":154775,"url":"https:\/\/css-tricks.com\/email-domain-datalist-helper\/","url_meta":{"origin":15346,"position":2},"title":"Email Domain Datalist Helper","author":"Chris Coyier","date":"October 31, 2013","format":false,"excerpt":"What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the \"forgot password\" feature doesn't work, and there is a lot of frustration and finger pointing. Can't\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306387,"url":"https:\/\/css-tricks.com\/better-form-inputs-for-better-mobile-user-experiences\/","url_meta":{"origin":15346,"position":3},"title":"Better Form Inputs for Better Mobile User Experiences","author":"Alex Holachek","date":"April 17, 2020","format":false,"excerpt":"Here\u2019s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/input-date-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/input-date-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/input-date-featured.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/input-date-featured.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/input-date-featured.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":287823,"url":"https:\/\/css-tricks.com\/weekly-news-pwa-issue-on-ios-performance-culture-anti-tracking-in-browsers\/","url_meta":{"origin":15346,"position":4},"title":"Weekly Platform News: PWA Issue on iOS, Performance Culture, Anti-Tracking in Browsers","author":"\u0160ime Vidas","date":"May 17, 2019","format":false,"excerpt":"In this week's news: resolving an issue when restarting progressive web apps in iOS, why The Telegraph now vets all scripts before they make it to their codebase, and Microsoft plans to add tracking prevention to the Edge browser.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-platform-news-0514.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8664,"url":"https:\/\/css-tricks.com\/styling-texty-inputs-only\/","url_meta":{"origin":15346,"position":5},"title":"Styling Texty Inputs Only","author":"Chris Coyier","date":"March 8, 2011","format":false,"excerpt":"A CSS3 technique for selecting only texty inputs, without the burdon of listing every single attribute selector for every single new HTML5 input type. Plus alternates.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/03\/fixed.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=15346"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15346\/revisions"}],"predecessor-version":[{"id":18949,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15346\/revisions\/18949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=15346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=15346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=15346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}