Эффект автодополнения

document.querySelector("input").addEventListener('input', function (e) { 
  document.querySelector("label").dataset.hint = e.target.value + "ква" 
})

label { 
  position: relative; 
  text-align: start; 
  font: 400 13.3333px Arial; 
  white-space: nowrap; 
} 
 
label::before { 
  content: attr(data-hint); 
  position: absolute; 
  left: 2px; 
  top: 0; 
  right: 2px; 
  bottom: 0; 
  opacity: .5; 
  pointer-events: none; 
} 
 
input { 
  font: inherit; 
}

<label><input autofocus></label>