CSS Background color of a textbox to be applied only to text

Question

I have two text boxes overlapping one another. The first text box, 'TextBox1', is defined by user input. The second, 'TextBox2', is populated by an AutoComplete functionality. My goal is to have the background of the first text box to be white ONLY for the text that has been typed so that the resulting 'TextBox2' only displays the remainder of the account name that gets returned.

Example: User types "ut tr" and the AutoComplete that gets stored in 'TextBox2' becomes: "UT Training". I have a text transform to capitalize the first letter of each word so after the transform (as the user types) "Ut Tr".

When the input is overlapped with the results that are in 'TextBox2' the two do no match because of the difference in the case of the letter. This can cause major cosmetic problems in other examples.

So, if the background of the text for the input textbox, 'TextBox1', could be white, then the user would only see what they've typed, and the remainder of the Autocomplete.

Thanks for any help! This is my first post so I apologize if I've unknowingly done anthing taboo.

Here is a link to a video that shows how this looks: http://screencast.com/t/ef6dBJyU2X14

Answer 1

You can check how many characters are now inputted by user, by something similar to:

$('#myInput').on('keydown', function() {
    inputLength = $(this).val().length
});

​And after that change color of the first N = inputLength characters in your auto complete to white. Probably, using substring:

substring(0, inputLength);

Answer 2

You can add a class to your input and apply a CSS styling for that like;

.someclass{
    color:#FFF;
    background-color:#FFF;
    border: solid 1px #000;
}
<input type="text" class="someclass">

Here is a working Live Demo.