Bootstrap-Tag-Werte werden nicht angezeigt?

Question

Ich habe noch nie versucht, Bootstrap-Tags zu verwenden, und ich bin verwirrt. Die gesamte Dokumentation ist so ziemlich der gleiche Code, aber ich kann es nicht zum Laufen bringen? Alles, was ich mit diesem Code machen möchte, ist die Anzeige der Werte der Elemente, die beim Klicken auf die Schaltfläche ausgewählt wurden. Ich möchte auch hinzufügen und löschen können, aber der Code zur Verfügung stellt nicht wirklich, wie dies zu tun ist? Der Code, den ich verwende, die die einzige, die ich finden kann, ist: -

<script> 
var cities = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: 'assets/cities.json' 
}); 
cities.initialize(); 

var elt = $('input'); 
elt.tagsinput({ 
    itemValue: 'value', 
    itemText: 'text', 
    typeaheadjs: { 
    name: 'cities', 
    displayKey: 'text', 
    source: cities.ttAdapter() 
    } 
}); 
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }); 
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" }); 
elt.tagsinput('add', { "value": 7 , "text": "Sydney"  , "continent": "Australia" }); 
elt.tagsinput('add', { "value": 10, "text": "Beijing"  , "continent": "Asia"  }); 
elt.tagsinput('add', { "value": 13, "text": "Cairo"  , "continent": "Africa" }); 
</script> 
<script> 
function myFunction() { 

    var info=$("#input").val() 
    alert(info); 
} 
</script> 

<button onclick="myFunction()">Try it</button> 

und die cities.json ist

[ { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }, 
    { "value": 2 , "text": "London"  , "continent": "Europe" }, 
    { "value": 3 , "text": "Paris"  , "continent": "Europe" }, 
    { "value": 4 , "text": "Washington" , "continent": "America" }, 
    { "value": 5 , "text": "Mexico City" , "continent": "America" }, 
    { "value": 6 , "text": "Buenos Aires", "continent": "America" }, 
    { "value": 7 , "text": "Sydney"  , "continent": "Australia" }, 
    { "value": 8 , "text": "Wellington" , "continent": "Australia" }, 
    { "value": 9 , "text": "Canberra" , "continent": "Australia" }, 
    { "value": 10, "text": "Beijing"  , "continent": "Asia"  }, 
    { "value": 11, "text": "New Delhi" , "continent": "Asia"  }, 
    { "value": 12, "text": "Kathmandu" , "continent": "Asia"  }, 
    { "value": 13, "text": "Cairo"  , "continent": "Africa" }, 
    { "value": 14, "text": "Cape Town" , "continent": "Africa" }, 
    { "value": 15, "text": "Kinshasa" , "continent": "Africa" } 
] 

Sorry, wenn dies eine einfach Frage ist aber überall, wo ich gehe ich das gleiche bekommen Proben, die scheinbar nicht funktionieren?

Vielen Dank

Answer 1

Dieser Code funktioniert für mich.

var elt = $('#elt'); 
elt.tagsinput({ 

    itemValue: 'value', 
    itemText: 'text', 
    typeaheadjs: [{ 
    hint: true, 
    highlight: true, 
    minLength: 2 
    },{ 
    name: 'cities', 
    displayKey: 'text', 
    source: cities.ttAdapter() 
    } 
    ] 
});