JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

CSS

.hidden {
  display: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 153px;
}

li {
  background: transparent;
}

li:hover {
  color: #fff;
  background: gray;
}

JavaScript

(function () {console.clear();
var input = document.createElement('input');
var list = document.createElement('ul');
document.body.appendChild(input);
document.body.appendChild(list);
list.className = 'hidden';
list.innerHTML = '<li>1</li><li>21</li><li>2</li><li>3</li><li>4</li><li>31</li><li>22</li><li>43</li>';
input.value = 1;
input.addEventListener('focus', function () {
	list.className = '';
});
var origin = [];
var li = Array.prototype.slice.call(list.children,0)
li.forEach(function (i) {
  i.addEventListener('click', function () {
    input.value = i.textContent;
  	list.className = 'hidden';
  });
  origin.push(i.textContent);
});

input.addEventListener('input', function () {
	var value = this.value;
  if ( value ) {
    origin.forEach(function (item, index) {
        if ( item.toLowerCase().indexOf(value) !== -1 )  {
        	li[index].style.display = '';
        } else {
          li[index].style.display = 'none';
        }
    });
  } else {
     li.forEach(function (i) {
      i.style.display = '';
    });
  }
});
})()