摘要：規(guī)定查詢時(shí)要顯示的條目的最大值。用于自動(dòng)高亮突出顯示結(jié)果。其值可以是關(guān)鍵字符串，或者是將推薦對(duì)象轉(zhuǎn)換為的函數(shù)。默認(rèn)為移除功能，并將元素的狀態(tài)重置為原始狀態(tài)。關(guān)閉的下拉菜單。實(shí)屬原創(chuàng)，如有錯(cuò)誤，煩請(qǐng)指教

前言：
最近有個(gè)輸入框自動(dòng)補(bǔ)全的需求，例如百度搜索功能：

在輸入框輸入信息后，自動(dòng)提示補(bǔ)全。我選擇用typeahead.js，后來(lái)發(fā)現(xiàn)，原來(lái)這個(gè)庫(kù)的相關(guān)學(xué)習(xí)資料很少，搞的稍微有點(diǎn)久，才弄明白點(diǎn)...
本文實(shí)屬原創(chuàng)，如有錯(cuò)誤，敬請(qǐng)指教！

簡(jiǎn)介：

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

在查資料的過(guò)程中，不難發(fā)現(xiàn)，typeahead.js一直會(huì)跟boostrap扯上關(guān)系。實(shí)際上在bootstrap 2.x時(shí)，自帶了補(bǔ)全控件typeahead；但是到了，bootstrap 3.x時(shí)，舍棄了這個(gè)插件，這是出現(xiàn)了多帶帶插件，名叫bootstrap-3-typeahead，再后面bootstrap-3-typeahead 改名 typeahead.js.

實(shí)踐：

因?yàn)閠ypeahead的更新變動(dòng)總是很大，所以每個(gè)版本的改動(dòng)也很大，而typeahead所以依賴的庫(kù)也出現(xiàn)了稍微的變化。下面介紹兩種方法：
第一個(gè)bower安裝，也是比較能保證依賴文件的準(zhǔn)確性：

在項(xiàng)目里面$ bower install typeahead.js

第二種手動(dòng)引用：
先下載最新版的typeahead.js，以及所有相關(guān)依賴。點(diǎn)我點(diǎn)我下載～
下載后，會(huì)是下面這幾個(gè)文件：

詳解：

bloodhound.js（獨(dú)立建議引擎）

typeahead.jquery.js（獨(dú)立的typeahead庫(kù)）

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

注：bloodhound.js和typeahead.jquery.js對(duì)jQuery 1.9＋依賴。

Examples:
1、基礎(chǔ)示例
Html代碼：

    

        
基本示例
        

            
        
    

js代碼：

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

            var substringMatcher = function (strs) {
                return function findMatches(q, cb) {
                    var matches, substrRegex;
                    matches = [];//定義字符串?dāng)?shù)組
                    substrRegex = new RegExp(q, "i");
                    //用正則表達(dá)式來(lá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)
            });

        });

效果圖下（請(qǐng)忽略丑丑的UI）：

數(shù)據(jù)為：

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

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

下面為要介紹兩種用ajax獲取遠(yuǎn)程數(shù)據(jù)的模式：
第一種是prefetch，是對(duì)數(shù)據(jù)請(qǐng)求一次，把所有數(shù)據(jù)拿下來(lái)。
第二種是remote，只有當(dāng)觸發(fā)輸入框的時(shí)候，數(shù)據(jù)才從服務(wù)端獲取。

2、ajax數(shù)據(jù)預(yù)讀示例（prefetch）

Html代碼為：

    

        
Ajax數(shù)據(jù)預(yù)讀示例
        

            
        
    

JS代碼為：

  /*** 2.Ajax數(shù)據(jù)預(yù)讀示例 ***/

    // 遠(yuǎn)程數(shù)據(jù)源
    var prefetch_provinces = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // 預(yù)獲取并緩存
        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()
    });  

數(shù)據(jù)為：

[
    {
        "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": "廣西省"
    }
]

文件結(jié)構(gòu)為：

效果如下：

這時(shí)候我們發(fā)現(xiàn)了一個(gè)問(wèn)題，當(dāng)你輸入一個(gè)“海”字，是否還能跟示例1一樣，出現(xiàn)“海南省”和“上海市”呢？答案看圖：

結(jié)果是不能！！
為什么呢？?哈哈～因?yàn)橄啾仁纠?，示例2沒(méi)有嚴(yán)謹(jǐn)?shù)恼齽t表達(dá)式再做篩選，改進(jìn)方法是自己再添加多一個(gè)正則判斷！

3.Ajax及時(shí)獲取數(shù)據(jù)示例（remote）

Html代碼：

    

        
Ajax及時(shí)獲取數(shù)據(jù)示例
        

            
        
    

JS代碼為：

        /*** 3.Ajax及時(shí)獲取數(shù)據(jù)示例 ***/
        //遠(yuǎn)程數(shù)據(jù)源
        var remote_cities = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace("CityName"),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // 在文本框輸入字符時(shí)才發(fā)起請(qǐng)求
            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(),
        });

數(shù)據(jù)為：

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

文件結(jié)構(gòu)為：

效果圖為：

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

有些同學(xué)可能會(huì)問(wèn)了，示例2和示例3的數(shù)據(jù)匹配方式好像不同耶？為什么同一個(gè)庫(kù)示例2匹配只從頭開始，而示例3則是任意文字匹配呢？
答案：因?yàn)樵趖ypeahead里面prefetch和remote封裝的方法不同。詳情可以查看typeahead里面的源碼。

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

實(shí)屬原創(chuàng)，如有錯(cuò)誤，煩請(qǐng)指教！