typeahead

by kpulkit29

HTML

<div>
  <input class="search"/>
  <div class="resultContainer">
  
  </div>
  <div>
    jshdjhsjshds
  </div>
</div>

CSS

.resultContainer {
  transform: scale(1,0);
  transform-origin: top center;
  transition:0.2s linear 50ms;
  position:absolute;
  top: 40px;
  left: 10px;
  width: 200px;
  border: 1px solid black;
  padding: 4px;
  z-index: 2;
  background: white;
}

.resultContainer > ul {
  list-style: none;
}

.search {
  width: 200px;
}

JavaScript

const suggestions = ["apple", "banana", "pulkkh", "vanshika", "grgg"];
function onChange(e) {
	const val = e.target.value;
  const typeAhead = suggestions.filter(item => item.includes(val) && val.length);
  const resultContainer = document.getElementsByClassName('resultContainer')[0];
  const ul = document.createElement("ul");
  resultContainer.innerHTML = '';
  for(let item of typeAhead) {
  	const li = document.createElement("li");
    li.innerText = item
    li.onclick = function() {
    	resultContainer.style.transform = "scale(1,0)";
      e.target.value = item
    }
    ul.appendChild(li);
  }
  
  ul.childNodes.length && resultContainer.appendChild(ul);
  ul.childNodes.length && (resultContainer.style.transform = "scale(1,1)");
}

let input = document.getElementsByClassName('search')[0];
let dimensions = input.getBoundingClientRect();

 const resultContainer = document.getElementsByClassName('resultContainer')[0];
 console.log(dimensions);
 resultContainer.style.top = `${dimensions.bottom + 10}px`;
resultContainer.style.left = `${dimensions.left}px`;
console.log(resultContainer.style);
document.getElementsByClassName('search')[0].addEventListener("input", onChange)