typehead.js 0.11.1

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
           }
       );
   },

总结:以后遇到问题要自己静下心来,慢慢琢磨,不能张嘴就问别人,不过大脑..要做一个不去麻烦别人的人