Update typeahead.js-bootstrap.css

add a z-index. The z-index helps to prevent collision when using the typeahead in a Twitter's Bootstrap modal.

Example code to show the problem:
 <!DOCTYPE html>
 <html>
 <head>
 <title>Responsive nesting</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      
      
    </style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="typeahead.js-bootstrap.css" rel="stylesheet">

<style type="text/css">
</style>
    </head>
    <body>
	
    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
     
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <form>
		
		 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
				 <fieldset>
			<legend>Legend</legend>
			<label>Label name</label>
			<input class="span3 typeahead" type="text" style="margin: 0 auto;">
		</fieldset>
		
		
	</form>	
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>
 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script src="bootstrap-master/js/bootstrap-modal.js"></script> 
<script src="typeahead.min.js"></script> 


<script>

$('input.typeahead').typeahead({
  name: 'countries',
  local: ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Wyoming']
  ,limit: 6 
});


</script>
</body>
</html>