原文网址:
http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/
这个例子肯定能用,考到记事本里,然后另存为html,见证奇迹吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Using the Typeahead plugin with Twitter Bootstrap 2 and jQuery</title>
<!-- http://dhtmlexamples.com/2012/02/27/using-the-typeahead-plugin-with-twitter-bootstrap-2-and-jquery/ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<style type="text/css">
body {
padding: 20px;
}
</style>
</head>
<body> <div class="container">
<input type="search" id="city" name="city" placeholder="Type a city name" data-provide="typeahead" class="search-query" />
</div> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var alCities = ['Baltimore', 'Boston', 'New York', 'Tampa Bay', 'Toronto', 'Chicago', 'Cleveland', 'Detroit', 'Kansas City', 'Minnesota', 'Los Angeles', 'Oakland', 'Seattle', 'Texas'].sort();
$('#city').typeahead({source: alCities, items:5});
});
</script> </body>
</html>
05-26 09:47