关键字自动补全插件——bs_typeahead

1.引入插件包 .css .js

	<%--jquery--%>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    
	<%--bootstrap--%>
    <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

	<%--bs_typeadhead--%>
    <script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

2.创建容器

<input type="text" id="create-customerName" placeholder="支持自动补全，输入客户不存在则新建">

3.js代码

注意：typeahead( ) 函数的source属性就是自动补全的数据的来源，来源分为静态数据和动态数据。

• 静态数据：可以是数组 [ ]。
• 动态数据：source是一个函数，里面是ajax请求，请求的结果必须是可遍历的json对象

//当容器加载完成之后，对容器调用工具函数
$("#create-customerName").typeahead({
	//数据的来源-静态
    //source:['京东商城','阿里巴巴','百度科技公司','字节跳动','动力节点']
    //数据的来源-动态
	source:function (jquery,process) {
		//每次键盘弹起，都自动触发本函数；我们可以向后台送请求，查询客户表中所有的名称，把客户名称以[]字符串形式返回前台，赋值给source
		//process：是个函数，能够将['xxx','xxxxx','xxxxxx',.....]字符串赋值给source，从而完成自动补全
		//jquery：在容器中输入的关键字
		//var customerName=$("#customerName").val();
		//发送查询请求
		$.ajax({
			url:'workbench/transaction/queryCustomerNameByName.do',
			data:{
				name:jquery
			},
			type:'post',
			dataType:'json',
			success:function (data) {//['xxx','xxxxx','xxxxxx',.....]
				process(data);
			}
		});
	}
});