bootstrap3-typeahead 自动补全

最新推荐文章于 2024-05-13 09:31:59 发布

schy_hqh

最新推荐文章于 2024-05-13 09:31:59 发布

阅读量264

点赞数

分类专栏： WEB前端@BootStrap3 文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/schy_hqh/article/details/84515886

版权

WEB前端@BootStrap3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

之前做的自动补全是用的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>

schy_hqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap3-typeahead 自动补全

之前做的自动补全是用的jquery的autocomplete，今天发现一个很酷的自动补全插件！很酷的一个自动补全插件http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件，完成自动补全数据源：Local：数组prefectch：jsonremote等方式 &lt;!...
复制链接

扫一扫

专栏目录