我可以让typeahead / boundhound始终显示用户在输入什么吗？

问题描述

我正在使用typeahead / bloodhound实现标签输入。用户可以添加新标签，而不必局限于已经存在的标签。

我想始终显示用户在建议列表中键入的内容，因此他们可以通过单击标签来创建标签（当前，可以通过键入逗号或键入enter来进行创建）。理想情况下，我可以将“ new”与现有标签区分开来，在“ new”的“建议”旁边加一个小徽章。

是否可以这样做（如果可以，怎么做）？

我现在拥有的代码可以正常运行（除了不显示下拉菜单中键入的内容）：

var tags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),queryTokenizer: Bloodhound.tokenizers.whitespace,prefetch: {
    url: '/Tags/list.json',cache: false,filter: function(list) {   
      return $.map(list,function(tag) {
        return { name: tag }; });
    }
  }
});
tags.initialize();
}

$('.tags-wrapper input').tagsinput({
  typeaheadjs: {
    name: 'tags',displayKey: 'name',valueKey: 'name',source: tags.ttAdapter(),}
});

解决方法

我知道了！

首先我添加：

templates: {
    empty: function(obj) {return '<div class="tt-suggestion tt-selectable tt-current-query">'+obj.query+' <span class="tt-new badge badge-info">New</span></div>';}
}

到$('.tags-wrapper input').tagsinput({ ...

然后我添加了一些新的jquery来检测用户何时单击新标签

$(document).on("click",".tt-current-query",function() {
    var input=$(this).closest('.twitter-typeahead').find('input.tt-input');
    input.trigger("keypress");
});

我不是100％知道为什么仅使用一个按键触发器就可以，但是确实可以！我想知道为什么会这样-我花了一段时间尝试插入逗号或返回按键事件，最终偶然发现了这种解决方案。