typehead.js
1. typehead.js的機制主要是當keyup的時候拿到資料,然後展示在對應的位置,我們引用這個外掛之後需要做的只有一件事,那就是怎麼引用資料
2. 關於 引用資料,分為本地資料,ajax資料,remote資料(暫時我能理解並運用的幾種)

1.ajax資料(最易理解)

ajaxData: function () {
            var _t = this;
            var states = [],//新建陣列
                obj = {};   //新建物件
            $('input[name="nameSearch"]'
 
).typeahead(
                {
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    source: function (query, process) {
                        $.ajax({
                            url: '../../assets/src/data/package.json'
 
,//模擬的本地資料
                            type: 'post',                             //請求型別
                            data: {query: query},                     //輸入框的內容
                            dataType: 'json',                         //返回值型別
                            success: function (data) {
                                $.each(data, function
 
 (i, o) {
                                    states.push(o.CityName);
                                    obj[o.ProvinceName] = o.ProvinceName;
                                });
                            return process(states)
                            }
                        });
                    },
                    limit: 10
                }
             );
        },

//package.json
[
  {"ProvinceName":"廣東省","CityName":"廣州市"},
  {"ProvinceName":"山東省","CityName":"濟南市"},
  {"ProvinceName":"陝西省","CityName":"西安市"},
  {"ProvinceName":"北京市","CityName":"北京市"},
  {"ProvinceName":"廣西自治區","CityName":"南寧市"},
  {"ProvinceName":"江蘇省","CityName":"南京市"},
  {"ProvinceName":"河南省","CityName":"鄭州市"},
  {"ProvinceName":"河北省","CityName":"石家莊市市"},
  {"ProvinceName":"湖南省","CityName":"長沙市"},
  {"ProvinceName":"湖北省","CityName":"武漢市"}
]

2.本地資料(這是外掛的一個基礎demo)

var substringMatcher = function(strs) {
     return function findMatches(q, cb) {
          var matches, substringRegex;

          // an array that will be populated with substring matches
          matches = [];

          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');

          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
              if (substrRegex.test(str)) {
                  matches.push(str);
              }
          });

          cb(matches);
      };
  };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    $('#the-basics .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            name: 'states',
            source: substringMatcher(states)
        }
     );

3.remote(Bloodhound)

remoteData: function () {
      var test = new Bloodhound({
          remote: {
              url: '../../assets/src/data/package.json?q=%QUERY',
              wildcard: '%QUERY'
          },
          datumTokenizer: Bloodhound.tokenizers.whitespace('CityName'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
      });
      test.initialize();
      $('input[name="nameSearch"]').typeahead({
              hint: true,
              highlight: true,
              minLength: 0
          },
          {
              name: 'test',
              displayKey: 'CityName',
              source: test.ttAdapter()
              // limit: 10
          });
  },

4.prefetch

 prefetchData: function () {
      var url = imgPanel.find('#tags-popover-ele').data('url');//獲取研發寫在頁面上的URL
       var data = new Bloodhound({
           datumTokenizer: Bloodhound.tokenizers.whitespace,
           queryTokenizer: Bloodhound.tokenizers.whitespace,
           prefetch: url,
       });
       data.initialize();                                       //

       $('input[name="nameSearch"]').typeahead({
               hint: true,
               highlight: true,
               minLength: 1
           }, {
               name: 'data',
               source: data
           }
       );
   },

總結:以後遇到問題要自己靜下心來,慢慢琢磨,不能張嘴就問別人,不過大腦..要做一個不去麻煩別人的人