bootstrap3-typeahead 自动补全

之前做的自动补全是用的jquery的autocomplete,今天发现一个很酷的自动补全插件! 

 

很酷的一个自动补全插件

http://twitter.github.io/typeahead.js

 

在bootstrap中使用typeahead插件,完成自动补全

 

数据源:

Local:数组

prefectch:json

remote等方式

 


bootstrap3-typeahead 自动补全
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- 需要额外的css样式覆盖bootstrap的样式,让dropdown列表好看些 -->
<link href="typeahead.css" rel="stylesheet">

<!-- typeahead需要1.9以上的jquery -->
<script src="jquery-10.0.2.js"></script>

<!-- typeahead -->
<script src="typeahead.min.js"></script>

<style>
body {
	padding: 50px; /*边距*/
}
input{
	font-size: 20px;
}
</style>
<script type="text/javascript">
	$(function(){
		//初始化typeahead
		$('input.typeahead').typeahead({               
			  name: 'countries',/*用来区分数据源,数据源可能有多个*/                                                          
			  local: ['Andorra', 'United Arab Emirates', 'Afghanistan', 'Anguilla'],  /*本地数据*/                               
			  limit: 10,
			  header: 'list of country:'/*结果集的标题*/
			});
	});
</script>
</head>
<body>
	<div style="text-align:left">
		<h3>Countries</h3>
		<p>Prefetches data, stores it in localStorage, and searches it on the client</p>
		<hr>
	</div>
	<div class="well well-lg">
		<!-- 自动补全框 -->
		<input type="text" class="typeahead" placeholder="country">
	</div>
</body>
</html>

 

你可能感兴趣的:(bootstrap)