twitter typeahead 爬坑

为了比较深入的使用自动补全功能，一直在选用twitter typeahead还是选jquery的autocomplete上徘徊，最终选了typeahead。结果发现因为是n年没有更新的项目，所以有不少的坑，特此记录
1，scrollbar的显示错误，如果hint备选的条目较多的时候，用户可以定义tt-menu来做scroll，但是经常会出现scrollbar显示错误的问题，跟踪了很久最终才发现是jquery版本的问题，必须使用juery1.10.2才可以，具体原因我也没有细查。
2，limit的bug，在远程获取数据（remote source）的情况下，limit功能经常有问题，跟踪代码后发现有个bug，后来在github用关键词limit一查，果然，根据github给出的bug处理方法修改即可。

以下，对项目里面使用typeahead的代码做一个记录

    //从服务器获取typeahead列表(医案的tags)
  var hintTags = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote:{
        url:'/yian/getHintTags?q=%QUERY',
        wildcard: '%QUERY'
    }
  });
  hintTags.initialize();
  $('.typeahead').typeahead(
    {
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'hintTags',
      display: 'value',
      limit:15,
      source: hintTags,
      templates: {
        empty: [
          '<div class="empty-message">',
            '没有相关Tags，请<b>重新输入</b>或<b>添加</b>Tags',
          '</div>'
        ].join('\n'),
       suggestion: function(item){return '<div><strong>'+item.value+'</strong> –<i class="input-memo"> '+item.memo+'</i></div>';}
      }
    }).on('typeahead:selected', function ($e, datum) {
        $("#tags-input").typeahead('val', '');  //清空数据
        $('#ill-input').tagsinput('add', datum);  //放入结果
    });