piotrze/styled_input.html

## styled_input.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div{
        position:relative;
      }
      input, span{
        top:0;
        position:absolute;
        width:120px;
      }
      span{
        top:2px;
        left:2px;
        z-index:1;
        overflow:hidden;
      }
      input{
        background:transparent;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div>
      <input onkeyup="fetchResults(this)" />
      <span id="styled-input"></span>
    </div>

    <script>
      function fetchResults(input){
        ajaxRequest(input.value, function(response){
          var query = response.query;
          styleInput(input, query.matched, query.non_matched);
        });

      }
      function ajaxRequest(query, callback){
        var responseFromServer = {
          query: {
            matched: query.substr(0,3),
            non_matched: query.substr(3)
          }
        };
        callback(responseFromServer);
      }
      function styleInput(input, matched, nonMatched){
        input.style.color = 'transparent';
        var span = document.getElementById('styled-input');
        span.innerHTML = '<b>' + matched + '</b>' + nonMatched;
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	div{
	position:relative;
	}
	input, span{
	top:0;
	position:absolute;
	width:120px;
	}
	span{
	top:2px;
	left:2px;
	z-index:1;
	overflow:hidden;
	}
	input{
	background:transparent;
	z-index:2;
	}
	</style>
	</head>
	<body>
	<div>
	<input onkeyup="fetchResults(this)" />
	<span id="styled-input"></span>
	</div>

	<script>
	function fetchResults(input){
	ajaxRequest(input.value, function(response){
	var query = response.query;
	styleInput(input, query.matched, query.non_matched);
	});

	}
	function ajaxRequest(query, callback){
	var responseFromServer = {
	query: {
	matched: query.substr(0,3),
	non_matched: query.substr(3)
	}
	};
	callback(responseFromServer);
	}
	function styleInput(input, matched, nonMatched){
	input.style.color = 'transparent';
	var span = document.getElementById('styled-input');
	span.innerHTML = '<b>' + matched + '</b>' + nonMatched;
	}
	</script>
	</body>
	</html>