5

我在將引導程序3 typeahead與標籤輸入但將對象作爲標籤進行集成時遇到問題。它的工作原理是,如果我在輸入字段中只使用typeahead,但如果我將它與標記輸入集成在一起,那麼它不起作用,我甚至不會收到任何真正令人沮喪的錯誤。這是我的代碼:集成引導程序3 typeahead和標籤輸入與對象作爲標籤

var places = [{name: "New York"}, {name: "Los Angeles"}]; 
//this works 
$('input').typeahead({ 
    source: places 
}); 

//this doesn't 
$('input').tagsinput({ 
    freeInput: false, 
    confirmKeys: [44], 
    typeahead: { 
     source: places 
    } 
}); 

我做錯了什麼或這是一個錯誤?

如果有人有一個這樣的工作示例我真的很感謝一些幫助,它可以是typeahead.js而不是bootstrap 3 typeahead,我試圖使用它以及它的工作原理,但然後我有一個問題,如果如果我從typeahead中選擇一個建議的選項,點擊輸入提交整個表單,而不是隻接受該選項作爲標記。

回答

6

您應該通過typeahead選項將打印頭附加到tagsinput上!這很容易(和什麼docs suggests)。然後,如果你map()places到字符串數組它的工作原理:

$('.tagsinput-typeahead').tagsinput({ 
    // other tagsinput options here 
    typeahead: { 
    source: places.map(function(item) { return item.name }), 
    afterSelect: function() { 
     this.$element[0].value = ''; 
    } 
    } 
}) 

演示 - >http://jsfiddle.net/gm3a1s9k/1/

通知的afterSelect()it is needed in order to clear the input

+2

@Mario_Plantosar不知道爲什麼這個答案不被接受。 –

+1

這和文檔有很大不同,但是很高興你發佈了這個。 – MeanGreen

+0

選擇一個選項並將其從標籤輸入中刪除後。它不會授予在按Tab或點擊鼠標事件時輸入在自由文本上輸入的標籤輸入的權限。請給解決辦法。 –