how to set different font-weights for characters in the same input box

how to set different font-weights for characters in the same input box

I need to create an input box with an automplete functionality. So when a
user enters "ja" , these first two characters will be in bold and
"vascript" will be in grey. For some reasons, I can't use the jquery
autocomplete function. As the words that the user can enter are not that
many, I created an array and assigned for each abbreviation , the word
that matches .
words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"JAVASCRIPT"}]
Then, when the user starts entering the word, I look in the array for the
word that matches with the "abbreviation", and display that word inside
the box . This works fine, the problem now is that I'm trying to highlight
the first characters entered by the user and keep the rest of the word in
grey. What I'm trying to do looks like this http://jsfiddle.net/wyVJW/894/
, except that I would like the word to be displayed inside the input box
itself and not in a scroll down menu. How can I set a font weight only on
the the characters entered and not on the whole input box?