Edit in JSFiddle

$(document).ready(function() {
     $('.cities.typeahead').typeahead({                               
          name: "cities",                
          local: ['italy', 'france', 'england', 'united states', 'brazil', 'spain']                                              
     });
});

<div class="container">

<h3>Install typeahead in bootstrap 3, fix css overlay bug and set width to 100%</h3>
<h4><a href="www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/">www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/</a></h4>
    
<br/><br/>

<input type="text" class="form-control cities typeahead" id="citiesInput" />

<br/><br/>

<p>The values are: "italy", "france", "england", "united states", "brasil" and "spain"
    
</div>

/* BUG FIX OVERLAY */

.twitter-typeahead .tt-hint {
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.twitter-typeahead .hint-small {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large {
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

/* WIDTH = 100% */

.twitter-typeahead {
	width: 100%; 
}

.tt-dropdown-menu {
	width: 100%;
}

.tt-hint {
    width: 100%;
}
}