twitter typeahead控件使用经历

typeahead控件能够用于自动完成这个功能，在jQuery的UI中也有自动完成的控件。之前都是用jQuery UI中的自动完成的控件，但此次想用个轻量级的自动完成的控件，所以就调查了一下typehead控件。

typeahead控件原先是集成在bootstrap2.x框架中的，在bootstrap3.x框架中把typehead独立出来了，托管在github中：http://twitter.github.io/typeahead.js/

咱们想要使用的功能其实相对比较简单，如图：

 

稍微跟普通自动完成有点差别的，就是当用户点击这个类别时，默认状况下若是啥也没输，则自动会提示几个最经常使用的类别，有点相似下拉框的功能。固然，若是用户输入了某几个字，则自动完成的功能也会体现出来。

在jQuery的autocomplete控件中，这个功能主要经过minChars=0这个属性来实现，在typeahead的例子中没有找到相似的用法，但在论坛中发现有以下的参数：

$('#search').typeahead({

     minLength: 2,

     //...

});

 

不过在其中提到，这个功能在v0.10.0版本中有，但目前官方版本为0.9.3。在下载了最新的版本后，测试了一下，没有达到咱们指望的效果，同时发现它对于bootstrap3的样式有点乱：

 

样式须要作调整，同时功能上也没找到咱们指望的效果，这样也就放弃使用typeahead控件，仍是用原先的jquery autocomplete控件。

可是，从基本用法上，跟jquery autocomplete比较起来，typeahead具备以下的优势：

1. 体积小，轻便
2. 用法简单

 

固然，目前的缺点也比较明显：

1. 不大成熟;
2. 功能上不如jquery autocomplete齐全