bootstrap3-typeahead 自动补全_综合

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

很酷的一个自动补全插件

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

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

数据源：

Local：数组

prefectch：json

remote等方式

<!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>