DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

tejesh p
tejesh p

Posted on • Updated on

DataList element for auto-completion in Input Text and for ticks in Input Range

One of the underrated HTML element is <datalist>

When user types in <input type="text"/>, the easiest way to show auto-complete suggestions is by using <datalist> HTML element.

<input type="text" list="cakes">

<datalist id="cakes">
  <option> Red Velvet Cake</option>
  <option> Genoise Cake </option>
  <option> Chiffon Cake </option>
  <option> Yellow Butter Cake </option>
  <option> Devil’s Food Cake </option>
</datalist>

To the input field, add the list attribute with value as id of datalist element.

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/VwvXpwB

https://codepen.io/tejesh0/pen/VwvXpwB

Interestingly, datalist element can be used with range input type to add ticks on slider.

<input type="range" min="0" max="1" step="0.01" list="slider-ticks">

<datalist id="slider-ticks">
  <option>0</option>
  <option>0.25</option>
  <option>0.5</option>
  <option>0.75</option>
  <option>1</option>
</datalist>

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/MWaVpeJ

https://codepen.io/tejesh0/pen/MWaVpeJ

In chrome browser, while moving the slider, you can observe the locking like effect when the slider is close to the ticks? Nice, isn't it?

Top comments (0)

Rust language vs others

Stop by this week's meme thread!