摘要：規定查詢時要顯示的條目的最大值。用于自動高亮突出顯示結果。其值可以是關鍵字符串，或者是將推薦對象轉換為的函數。默認為移除功能，并將元素的狀態重置為原始狀態。關閉的下拉菜單。實屬原創，如有錯誤，煩請指教

前言：
最近有個輸入框自動補全的需求，例如百度搜索功能：

在輸入框輸入信息后，自動提示補全。我選擇用typeahead.js，后來發現，原來這個庫的相關學習資料很少，搞的稍微有點久，才弄明白點...
本文實屬原創，如有錯誤，敬請指教！

簡介：

官網：http://twitter.github.io/typeahead.js
 github: https://github.com/twitter/typeahead.js
使用文檔：https://www.awesomes.cn/repo/twitter/typeahead-js

在查資料的過程中，不難發現，typeahead.js一直會跟boostrap扯上關系。實際上在bootstrap 2.x時，自帶了補全控件typeahead；但是到了，bootstrap 3.x時，舍棄了這個插件，這是出現了多帶帶插件，名叫bootstrap-3-typeahead，再后面bootstrap-3-typeahead 改名 typeahead.js.

實踐：

因為typeahead的更新變動總是很大，所以每個版本的改動也很大，而typeahead所以依賴的庫也出現了稍微的變化。下面介紹兩種方法：
第一個bower安裝，也是比較能保證依賴文件的準確性：

在項目里面$ bower install typeahead.js

第二種手動引用：
先下載最新版的typeahead.js，以及所有相關依賴。點我點我下載～
下載后，會是下面這幾個文件：

詳解：

bloodhound.js（獨立建議引擎）

typeahead.jquery.js（獨立的typeahead庫）

typeahead.bundle.js（bloodhound＋typeahead.jquery的組合體）

注：bloodhound.js和typeahead.jquery.js對jQuery 1.9＋依賴。

Examples:
1、基礎示例
Html代碼：

    

        
基本示例
        

            
        
    

js代碼：

       jQuery(function () {
            /*** 1.基本示例 ***/
            var provinces = ["廣東省", "海南省", "山西省", "山東省","湖北省", "湖南省", "陜西省", "上海市", "北京市", "廣西省"];

            var substringMatcher = function (strs) {
                return function findMatches(q, cb) {
                    var matches, substrRegex;
                    matches = [];//定義字符串數組
                    substrRegex = new RegExp(q, "i");
                    //用正則表達式來確定哪些字符串包含子串的"q"
                    $.each(strs, function (i, str) {
                    //遍歷字符串池中的任何字符串
                        if (substrRegex.test(str)) {
                            matches.push({ value: str });
                        }
                    //包含子串的"q",將它添加到"match"
                    });
                    cb(matches);
                };
            };

            $("#basic-example .typeahead").typeahead({
                highlight: true,
                minLength: 1
            },
            {
                name: "provinces",
                displayKey: "value",
                source: substringMatcher(provinces)
            });

        });

效果圖下（請忽略丑丑的UI）：

數據為：

var provinces = ["廣東省", "海南省", "山西省", "山東省","湖北省", "湖南省", "陜西省", "上海市", "北京市", "廣西省"];

---------- 華麗麗的分割線 ----------

下面為要介紹兩種用ajax獲取遠程數據的模式：
第一種是prefetch，是對數據請求一次，把所有數據拿下來。
第二種是remote，只有當觸發輸入框的時候，數據才從服務端獲取。

2、ajax數據預讀示例（prefetch）

Html代碼為：

    

        
Ajax數據預讀示例
        

            
        
    

JS代碼為：

  /*** 2.Ajax數據預讀示例 ***/

    // 遠程數據源
    var prefetch_provinces = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // 預獲取并緩存
        prefetch: "././data/provinces.json"
    });

    prefetch_provinces.initialize();

    $("#ajax-prefetch-example .typeahead").typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }
    , {
        name: "provinces",
        displayKey: "value",
        source: prefetch_provinces.ttAdapter()
    });  

數據為：

[
    {
        "Id":1,
        "value": "廣東省"
    },
    {
        "Id":2,
        "value": "海南省"
    },
    {
        "Id":3,
        "value": "山西省"
    },
    {
        "Id":4,
        "value": "山東省"
    },
    {
        "Id":5,
        "value": "湖北省"
    },
    {
        "Id":6,
        "value": "湖南省"
    },
    {
        "Id":7,
        "value": "陜西省"
    },
    {
        "Id":8,
        "value": "上海市"
    },
    {
        "Id":9,
        "value": "北京市"
    },
    {
        "Id":10,
        "value": "廣西省"
    }
]

文件結構為：

效果如下：

這時候我們發現了一個問題，當你輸入一個“海”字，是否還能跟示例1一樣，出現“海南省”和“上海市”呢？答案看圖：

結果是不能！！
為什么呢？?哈哈～因為相比示例1，示例2沒有嚴謹的正則表達式再做篩選，改進方法是自己再添加多一個正則判斷！

3.Ajax及時獲取數據示例（remote）

Html代碼：

    

        
Ajax及時獲取數據示例
        

            
        
    

JS代碼為：

        /*** 3.Ajax及時獲取數據示例 ***/
        //遠程數據源
        var remote_cities = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace("CityName"),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // 在文本框輸入字符時才發起請求
            remote: "././ajax/GetCities?q=%QUERY"
        });
        remote_cities.initialize();
        $("#ajax-remote-example .typeahead").typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, 
        {
            name: "cities",
            displayKey: "CityName",
            source: remote_cities.ttAdapter(),
        });

數據為：

[{"Id":1,"ProvinceName":"廣東省","CityName":"廣州市"},{"Id":2,"ProvinceName":"山東省","CityName":"濟南市"},{"Id":3,"ProvinceName":"陜西省","CityName":"西安市"},{"Id":4,"ProvinceName":"北京市","CityName":"北京市"},{"Id":5,"ProvinceName":"廣西自治區","CityName":"南寧市"},{"Id":6,"ProvinceName":"江蘇省","CityName":"南京市"}]

文件結構為：

效果圖為：

看到這里應該有不少人有疑問吧？為什么輸入“南”字，雖然與“南”相關的數據都有匹配到，但是所有數據都出來了？這是為什么呢？
答案有點繞，首先，我們要清楚一點，remote的方法是當你觸發事件后，才想遠程及時獲取數據的，但是示例3全部用到的是前端的東西，只是模擬從遠程拿取數據，并沒有從真正的服務器上面獲取，所以結果就是顯示所有數據（我的錯！哈哈哈），解決方法就是：在服務端加多一個正則加以過濾，只有匹配到的才拿下來。雖然說前端也是可以做過濾的，但是盡量不要把不必要的數據下載下來。

有些同學可能會問了，示例2和示例3的數據匹配方式好像不同耶？為什么同一個庫示例2匹配只從頭開始，而示例3則是任意文字匹配呢？
答案：因為在typeahead里面prefetch和remote封裝的方法不同。詳情可以查看typeahead里面的源碼。

接口：
name —— 數據集的名字。
source —— 規定包含查詢時要顯示的值的數據源。值的類型是 array，默認值是 [ ]。
items —— 規定查詢時要顯示的條目的最大值。數據類型是 number，默認值是 8。
highlighter —— 用于自動高亮突出顯示結果。帶有一個單一的參數，即具有 typeahead 實例范圍的條目。數據類型是 function。默認情況下是高亮突出顯示所有默認的匹配項。
minLength —— 推薦引擎開始渲染所需要的最小字符。默認為 1 。
hint —— 默認為 true,會自動補全第一個匹配的元素，設置為 false 時，typeahead 將不會補全 .
display - 對于推薦對象，決定用何種字符串表示，并將會在某個輸入控件選擇后使用。其值可以是關鍵字符串，或者是將推薦對象轉換為string的函數。默認為 value.
$(".typeahead").typeahead("destroy");移除typeahead功能，并將 input 元素的狀態重置為原始狀態。
$(".typeahead").typeahead("open");打開typeahead下拉菜單。
$(".typeahead").typeahead("close");關閉typeahead的下拉菜單。
var myVal = $(".typeahead").typeahead("val"); 返回typeahead的當前值，該值為用戶輸入到 input 元素中的文本
$(".typeahead").typeahead("val", myVal);設置typeahead的值，要來替代 jQuery#val 函數。

實屬原創，如有錯誤，煩請指教！