我可以讓 typeahead/bloodhound 總是顯示用戶正在輸入的內容嗎？

Question

我正在使用 typeahead/bloodhound 實現標簽輸入。 用戶可以添加新標簽，而不受限於已存在的標簽。

我想始終顯示用戶在建議列表中輸入的內容，以便他們可以通過單擊來創建標簽（目前他們可以通過輸入逗號或輸入 Enter 來創建）。 理想情況下，我將能夠通過在“建議”旁邊顯示新標簽的小徽章來區分新標簽和現有標簽。

是否可以這樣做（如果可以，如何）？

我現在擁有的代碼完全有效（除了不顯示在下拉列表中輸入的內容）：

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

Answer 1

我想到了！

首先我補充說：

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% 確定為什么這僅適用於按鍵觸發器，但確實如此！ 我很想知道為什么會這樣 - 我花了一段時間嘗試注入逗號或返回按鍵事件，最終偶然發現了這個解決方案。