Zintegruj wejście typu bootstrap 3 i znaczniki wejściowe z obiektami jako znacznikami

Question

Mam problemy z integracją typu bootstrap 3 z wejściami znaczników, ale z obiektami jako znacznikami. Działa, jeśli używam tylko wpisowego w polu wejściowym, ale jeśli zintegruję go z wejściem znaczników, to nie działa i nie dostaję żadnych błędów, które są naprawdę frustrujące. Oto mój kod:

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

Czy robię coś nie tak, czy to błąd?

Jeśli ktoś ma działający przykład tego, byłbym wdzięczny za pomoc, może to być typeahead.js zamiast bootstrap 3 typeahead, próbowałem użyć tego również i działa, ale wtedy mam problem gdzie, jeśli Wybieram sugerowaną opcję z wpisu typu "kliknij", aby wpisać cały formularz, zamiast akceptować tę opcję jako tag.

Answer 1

Powinieneś dołączyć głowicę reklamową do taginput za pomocą opcji typeahead! Jest to znacznie łatwiejsze (i co to jest docs suggests). Następnie, jeśli map()places do tablicy ciągów to działa:

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

demo ->http://jsfiddle.net/gm3a1s9k/1/

obwieszczeniu afterSelect(), it is needed in order to clear the input.