enter image description here

It is impossible to do this with input, so we will use a div with the attribute contenteditable="true"

There is an input form. The user enters the text into it and automatically searches the database. How to get the result from the database in the form of a certain placeholder , which is not available to the user, and by pressing the spacebar to replace the entered result with the result from this placeholder ?

    1 answer 1

    With input can be something like this:

     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>