I'm currently developing a feature that mimics an "autofill" functionality. Essentially, when a user enters text into an input field and the system matches this text in the database, it should display the matched string in grey within the same input field (similar to Google's autofill feature).
To achieve this, I've created two input fields - one visible to the user:
HTML:
<input id="email_input" type="text">
<input id="autofill" type="text">
CSS:
#email_input{
background-color: transparent;
z-index: 100;
}
Next, I dynamically position the autofill input using JavaScript to align with the email_input:
function positionAutocompleteInput(){
var top = $('#email_input').position().top;
var left = $('#email_input').position().left;
$('#autofill').css({'top':top});
$('#autofill').css({'left':left});
}
positionAutoFillInput();
The actual autofill process is implemented like this:
function autofill(context){
var input = $('#email_input').val();
var replacement = context[0].email;
replacement = replacement.slice(input.length);
var display = input + replacement;
$('#autofill').val(display)
}
I've attempted to reposition autofill on each user input event by calling positionAutoFillInput();. However, despite checking the positions of both input fields in the console, they seem to be correctly aligned.
Both input fields share the same font-size and font-family properties.
Nevertheless, the visual output seems to be a bit off:
https://i.sstatic.net/NOqQv.png
If anyone has insights or solutions to improve this implementation, please feel free to share!