2017-07-04 92 views
0

我從來沒有嘗試過使用bootstrap標籤,我很困惑。所有的文檔都是相同的代碼,但我不能讓它工作?我想用這個代碼做的事情是顯示點擊按鈕時所選項目的值。我也希望能夠添加和刪除它們,但提供的代碼並不真正顯示如何執行此操作?我使用的是唯一我能找到的代碼是: -Bootstrap標記值沒有顯示?

<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> 

和cities.json是

[ { "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" } 
] 

很抱歉,如果這是一個簡單的問題,但無論我去哪裏,我得到同樣的似乎不起作用的樣品?

非常感謝

回答

0

此代碼適用於我。

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

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