typeahead控件能够用于自动完成这个功能,在jQuery的UI中也有自动完成的控件。之前都是用jQuery UI中的自动完成的控件,但此次想用个轻量级的自动完成的控件,所以就调查了一下typehead控件。jquery
typeahead控件原先是集成在bootstrap2.x框架中的,在bootstrap3.x框架中把typehead独立出来了,托管在github中:http://twitter.github.io/typeahead.js/git
咱们想要使用的功能其实相对比较简单,如图:github
稍微跟普通自动完成有点差别的,就是当用户点击这个类别时,默认状况下若是啥也没输,则自动会提示几个最经常使用的类别,有点相似下拉框的功能。固然,若是用户输入了某几个字,则自动完成的功能也会体现出来。bootstrap
在jQuery的autocomplete控件中,这个功能主要经过minChars=0这个属性来实现,在typeahead的例子中没有找到相似的用法,但在论坛中发现有以下的参数:框架
$('#search').typeahead({测试
minLength: 2,spa
//...blog
});get
不过在其中提到,这个功能在v0.10.0版本中有,但目前官方版本为0.9.3。在下载了最新的版本后,测试了一下,没有达到咱们指望的效果,同时发现它对于bootstrap3的样式有点乱:it
样式须要作调整,同时功能上也没找到咱们指望的效果,这样也就放弃使用typeahead控件,仍是用原先的jquery autocomplete控件。
可是,从基本用法上,跟jquery autocomplete比较起来,typeahead具备以下的优势:
固然,目前的缺点也比较明显: