render LI in UL

index.html

<div id="root">  
  <input type="text" class="form-control" placeholder="Введите имя" value="">
  <ul></ul>
</div>

index.js

var root = document.getElementById('root');
window.inputTag = root.getElementsByTagName('INPUT')[0];
window.ulTag = root.getElementsByTagName('UL')[0];
window.inputTag.oninput = getValueInput;

window.data = [{name: 'ololo', id:1},{name: 'Vasya', id:2},{name: 'Sergey', id:3},{name: 'Alex', id:4},{name: 'Denis', id:5},{name: 'Natali', id:6},{name: 'Ekaterina', id:7}]


function getValueInput(e){
  if (!e.target.value) {
    var render = ''
    for (var i=0; i < window.data.length; i++) {
          render+= '<li>имя: ' + window.data[i].name + ' id: ' + window.data[i].id + '</li>\n'
    }
    ulTag.innerHTML = render;
    return;
  }
  var state = window.data.slice();
  state = state.filter(function(us){
    return us.name.toLowerCase().indexOf(e.target.value) !==-1;
  });
  var render = '';
  for (var i=0; i < state.length; i++) {
    render+= '<li>имя: ' + state[i].name + ' id: ' + state[i].id + '</li>\n'
  }
  ulTag.innerHTML = render;
}

style.css

#root input{
	display: inline-block;
	width: 200px;
}
#root ul{
	position: absolute;
	padding: 0px;
	list-style-type: none;
	background-color: #fff; 
	color: #55595c;
	border: none;
	box-shadow: 0 2px 5px -1px rgba(0,0,0,.2);
}
#root ul li{
	margin: 5px;
}
#root ul li:hover{
	cursor: pointer;
	background-color: #55595c;
	color: #fff;
}