如何使用自舉輸入標籤自動完成

我正在使用自舉輸入標籤自動完成https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/。我試圖插入，但無效。這裏是我的代碼如何使用自舉輸入標籤自動完成

<script src="dist/bootstrap-tagsinput.js"></script> 
<link rel="stylesheet" href="dist/bootstrap-tagsinput.css"> 

<title>Untitled Document</title> 
<body> 
<input type="text" /> 
<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({ 
    tagClass: function(item) { 
    switch (item.continent) { 
     case 'Europe' : return 'label label-primary'; 
     case 'America' : return 'label label-danger label-important'; 
     case 'Australia': return 'label label-success'; 
     case 'Africa' : return 'label label-default'; 
     case 'Asia'  : return 'label label-warning'; 
    } 
    }, 
    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> 

</body> 
</html>

來源

2017-03-09 Hashaam

那麼，[angular-ui-bootstrap]標籤如何與此相關？ – svarog

我認爲你缺少其中預取城市名單預輸入代碼，所以代替現有的預取代碼中使用此代碼：

prefetch: { 
url: 'assets/citynames.json', 
filter: function(list) { 
    return $.map(list, function(cityname) { 
    return { name: cityname }; }); 
}}

請注意： Typeahead.js應該安裝在您的項目中。

來源

2017-05-25 13:49:20 Chandan

如何使用自舉輸入標籤自動完成

回答

相關問題