{"id":2072,"date":"2024-05-30T14:41:14","date_gmt":"2024-05-30T21:41:14","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2072"},"modified":"2024-05-30T14:41:14","modified_gmt":"2024-05-30T21:41:14","slug":"auto-filtering-a-dropdown-list-with-datalist","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/auto-filtering-a-dropdown-list-with-datalist\/","title":{"rendered":"Auto-filtering a dropdown list with datalist"},"content":{"rendered":"\n

At times, we developers are so focused on Angular and TypeScript that we forget that even the basics, such as HTML and CSS, are always evolving. In that spirit, I’ve covered some hidden gems of HTML in the past<\/a>.<\/p>\n\n\n\n

For instance, I’ve seen numerous consulting clients<\/a> use a specific library for fancy auto-filter or auto-complete dropdowns. While the approach works, adding too many dependencies is the number 1 reason people get stuck with an old version of Angular<\/a>.<\/p>\n\n\n\n

Enter datalist<\/a>, a simple HTML element that auto-suggests and filters based on user input:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

How’s that for a low-code, no-dependency solution? datalist<\/code> works very much like a select<\/code> element, using a list of options<\/code> to be rendered. What connects the datalist<\/code> to an input<\/code> is the list<\/code> attribute on the input that refers to the id<\/code> of the datalist<\/code> element:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that’s it. On a side note, datalist<\/code> is also compatible with many other input types, such as time<\/code> or color<\/a><\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This results in:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

At times, we developers are so focused on Angular and TypeScript that we forget that even the basics, such as HTML and CSS, are always evolving. In that spirit, I’ve covered some hidden gems of HTML in the past. For instance, I’ve seen numerous consulting clients use a specific library for fancy auto-filter or auto-complete […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-2072","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2072"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2072\/revisions"}],"predecessor-version":[{"id":2080,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2072\/revisions\/2080"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}