bootstrap3-typeahead 自动补全完美使用教程

这篇文章记录了我在使用typeahead的一些问题，不是很全，但是基本够用。

Bootstrap提供typeahead组件来完成自动补全功能。

在做之前，我们先来看看它的选项

一、Source是个啥：
1、Array数组，当然，数组里面是简单的String或者JSOn都无所谓
2、还可以是个function（什么叫还可以是个function），这个source可以是个方法返回回来的（看到这里是不是有那么一点点感觉了），我们想要的是啥，是不是一个Ajax请求，请求到后台，请求返回来的内容作为我们的Source，在Source的Description里看看function有些什么内容，一但看到有function的，一定会告诉我们，这个function有哪些参数。
3、Description中描述的是：
用于查询的数据源：
    （1）、可以是一个String数组
    （2）、也可以是一个JSON数组（注意，这个JSON对象必须有一个叫做name的属性，这个name属性是用于哪里的？是不是应该就是用于显示在自动补全下拉列表中的东西）
    （3）、接着来看，或者是一个function（这个function接收两个参数：第一个value是query--即当前你正在用的查询的值；第二个value是process的callback--回调函数，说明调的是一个方法）
    （4）、如果你是通过异步调用方法返回的数据（我们当前拿数据肯定是异步的），就要把你这个返回的数据作为第二个参数的argument进行调用（这里先卖个关子，欲知详情，请看下面代码）--可能英文文档看着有点懵逼，有些文档类的东西用代码写出来就会一目了然了

4、通过上面的描述信息，我们现在用的肯定是function这种方式

二、Items：
即下拉列表中可以显示的最多数据（即最多显示多少个）

三、minLenght：
最少开始查询的数据（我们肯定需要用到这个东西）

四、displayText：
直接说就是一个 function，默认为 item.name || item（用于获取从 Source 中得到的信息在字面上显示的内容，这个里面的值如果是有 item.name 属性就显示name属性，如果没有就直接显示 item ），回到Source描述中的 an array of JSON object..... 如果数组里面的数据时一个json，那么这个json必须有一个name属性，所以这个属性完全可以不叫name，甚至可以自己写一个function用于显示displayText

五、有了这几个东西就可以开始做了，看着下面的代码也许会更加清楚

六、首先在页面中准备一个input，
<input type="text" class="form-controller id="loginInfoDisplay" autocomplate="off"/>

七、第二再准备一个隐藏域
<input type="hidden" name="loginInfoValue"/>

八、要用这个typeaheader，必须要引入js文件
<script type="text/javascript" src="/js/plugins/bootstrap3-typeahead.min.js"></script>

九、下面是详细实现，每一步都写的很清楚了

        十、Methods我们只关心.getActive（就是拿到当前选中的id）    

//自动补全
$("#autocomplate").typeaheader({
	//配置minLength
	minLength:3,//最少输入字符串
	items:8,//最多显示的下拉列表内容
	//1、先配置数据源(可以先不配置数据源，先配置其他东西)
	source:function(query,process){//第一个为正在查询的值，第二个参数为函数(该函数)
		//使用Ajax加载数据源
		$.ajax({
		dataType:"json",
		type:"POST",
		url:"xxx.do",
		//查询的数据(keyword为query)				
		data:{keyword:query},
		//data为一个Json对象的数组
		success:function(data){
			//如果数据有长度,就交给typeaheader显示列表
			if(data && data.length){
			    //process为获得数据之后用来调用的方法(方法之后,下拉列表的内容就可以呈现了)
			    process(data);
				/*
				 *什么地方类似的?
				 * 1、Filter：过滤器执行后，要让程序继续往下执行,就要传一个chain进来,调用chain.doFilter()才能往下继续执行
				 * 2、AOP：使用Annotation完成spring的aop、around环绕通知，环绕通知方法里第一个参数为proceeding Joinpoint
				 * */
			}
		}
	});
	},
	//此时Source就搞定了，但是source的data里面是一个json数组{id:(userId),username:(username)},可以将username改写成name，就万事大吉了
	//如果写的是username，还要提供一个displayText的方法
	
	//用于告诉typeaheader怎么显示json对象数据
	//function中需要传一个item，该item就是返回回来的一个一个json对象
	displayText:function(item){
	    return item.username;
	}
	}).change(function(){
		var current = this.typeaheader("getActive");
		//尝试获取当前选中对象的id   console.debug(current);
		if(current){
			$("#infoValue").val(current.id);
			
			}
		});

	//此时仍然不能选，因为还没有实现onchange方法(先实现后台的方法)
	$("autocomplate").on("show.bs.dropdown",function(){
		if($("[name=infoDisplay]").val() < 3) return false;
	        }
	);
		

十一、此方法就可以得到选中的那个
var current = $input.typeaheader("getActive);

以上是个人在使用过程中的一点记录，希望对你有所帮助，也希望能对文章中的不当之处进行指正，欢迎转载。