TIL: HTML tags I did not know about

HTML has evolved a lot over the years and has added a lot of “RICH” elements.

Here are some cool HTML elements that I’ve just recently learned about:

1. `<datalist>` #

<datalist> - lightweight autocomplete

html datalist

Example of using <datalist> in a rails form:

add a collection for the datalist:

# app/models/post.rb
  DEFAULT_COUNTRIES = ["European Union", "United States", "China", "Ukraine", "United Kingdom"].freeze

add a datalist collection with an ID ('default-countries')
add list attribute to a text field, pointing to the datalist collection with an ID ('default-countries')

# app/views/posts/_form.html.erb
<%= form.text_field :icon, list: 'default-countries', placeholder: "select or add your own" %>
  <datalist id="default-countries">
    <% Post::DEFAULT_COUNTRIES.each do |x| %>
      <option value="<%= x %>"></option>
    <% end %>
  </datalist>

same as above, different syntax:

# app/views/posts/_form.html.erb
<%= form.text_field :icon, list: "default-countries", placeholder: "select or add your own" %>
  <datalist id="default-countries">
    <%= options_for_select(Post::DEFAULT_COUNTRIES) %>
  </datalist>

datalist with rails