版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26975307/article/details/79918080
这篇文章记录了我在使用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进行调用（这里先卖个关子，欲知详情，请看下面代码）--可能英文文档看着有点懵逼，有些文档类的东西用代码写出来就会一目了然了
即下拉列表中可以显示的最多数据（即最多显示多少个）
三、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>
十一、此方法就可以得到选中的那个
var current = $input.typeaheader("getActive);
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这种方式
即下拉列表中可以显示的最多数据（即最多显示多少个）
三、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);
以上是个人在使用过程中的一点记录，希望对你有所帮助，也希望能对文章中的不当之处进行指正，欢迎转载。