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齊全