为了比较深入的使用自动补全功能,一直在选用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); //放入结果
});