Creating Input Dropdown With JavaScript

Last updated on April 11, 2020

In this blog post, I would like to give you one simple idea of Creating Input Dropdown with Javascript.

Introduction

For most of the peers, it’s bit hard for designing the simple html element with CSS.

So, they usually end up using 3rd party UI component libraries for even simple kind of like search input element.

Like this pattern I also faced earlier but now I completely changed and most of the times I stick to create my own HTML element with minimal CSS. .

Thus, provides me more finer control on the element.

Creating Input Dropdown with JavaScript

Here I have given the simple Input Dropdown but Vanilla HTML.

<div class="container">
  <input type="text" id="users" list="users-list" />
  <datalist id="users-list">
    <option value="Srini">Srinivasan</option>
    <option value="Rajan">Rajan</option>
    <option value="Sivan">Sivan</option>
    <option value="Bombard">Bombard</option>
    <option value="Vany">Vany</option>
  </datalist>
</div>