SO typeahead
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/u/2665617/bootstrap/2013-02-12/bootstrap.css">
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]"><ul class="typeahead dropdown-menu" style="top: 69px; left: 19px; display: none; "><li data-value="New Jersey" class="active"><a href="#">New <strong>J</strong>ersey</a></li></ul>
</div>
CSS
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: red;
text-decoration: none;
outline: 0;
background-color: #aaa;
background-image: -moz-linear-gradient(top, #fff, #aaa);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#aaa), to(#aaa));
background-image: -webkit-linear-gradient(top, #aaa, #aaa);
background-image: -o-linear-gradient(top, #aaa, #aaa);
background-image: linear-gradient(to bottom, #aaa, #aaa);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#aaaaaa', GradientType=0);
}