Edit in JSFiddle

var dl_input = document.querySelector('.data-list-txt');
var dl_select= document.querySelector('.data-list');
function makeDataList(state){
	if(state){
  	dl_select.style.border = "1px solid rgb(102, 175, 233)";
  }else{
  	dl_select.style.border = "1px solid #ccc";
  }
}
function setValue(value) {
  dl_input.value = value;
 	dl_select.selectedIndex = 0;
 
}
dl_input.addEventListener('focus', function(){makeDataList(true)});
dl_input.addEventListener('blur', function(){makeDataList(false)});

<!-- just for testing IGNORE -->
<div class="push"></div>
<!-- just for testing IGNORE -->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p>A better datalist implementation</p>
            <div class="well">
                <input class="data-list-txt form-control" type="text" value="http://www.google.com" />
                <select class="data-list form-control" id="list" onchange="setValue(this.value)">
                    <option style="display:none"></option>
                    <option value="http://www.google.com">http://www.google.com</option>
                    <option value="http://twitter.com">http://twitter.com</option>
                    <option value="http://ycombinator.com">http://ycombinator.com</option>
                    <option value="http://facebook.com">http://facebook.com</option>
                </select>
            </div>
        </div>
    </div>
</div>

.data-list-txt {
    min-width: 90%;
    max-width: 90%;
    display: inline;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background-color: #fff;
}
.data-list-txt:focus{
  box-shadow: none;
}
.data-list {
    margin-top: -34px;
}
/* testing IGNORE*/
 .push {
    margin-top: 40px;
}