Question

我正在使用Bootstrap输入标记自动完成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>

Answer 1

我认为您缺少预取城市列表的预先输入代码，因此请使用此代码代替现有的预取代码：

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

请注意：应在项目中安装Typeahead.js。

如何使用bootstrap输入标记自动完成

1 个答案: