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: [
          '
', '没有相关Tags,请重新输入添加Tags', '
' ].join('\n'), suggestion: function(item){return '
'+item.value+' '+item.memo+'
';} } }).on('typeahead:selected', function ($e, datum) { $("#tags-input").typeahead('val', ''); //清空数据 $('#ill-input').tagsinput('add', datum); //放入结果 });

你可能感兴趣的:(编程技巧)