Question

我想将标签使用限制为仅从API获取的标签。

"Object as tags" example似乎是我正在寻找的东西，但是typeahead似乎没有按预期工作（没有占位符打开）

<input id="tags" type="text">

<script>
  var tags = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://example.com/tags'
  });
  tags.initialize();

  $('input#tags').tagsinput({
    itemValue: 'id',
    itemText: 'name',
    typeahead: {
      name: 'tags',
      displayKey: 'name',
      source: tags.ttAdapter()
    }
  });
</script>

以下是从API返回的一些数据：

[
  {
    "name": "amazon",
    "createdAt": "2015-07-27T08:28:29.320Z",
    "updatedAt": "2015-07-27T08:28:29.320Z",
    "id": "55b5ebad3bbd894909b0eef5"
  },
  {
    "name": "android",
    "createdAt": "2015-07-27T08:28:29.398Z",
    "updatedAt": "2015-07-27T08:28:29.398Z",
    "id": "55b5ebad3bbd894909b0eef6"
  },
  {
    "name": "c-sharp",
    "createdAt": "2015-07-27T08:28:29.485Z",
    "updatedAt": "2015-07-27T08:28:29.485Z",
    "id": "55b5ebad3bbd894909b0eef7"
  },
  ...
]

我使用的是Bootstrap 3.1.0，jQuery 1.10.2，Bootstrap Tags Input 0.4.2和Typeahead 0.11.1。

Answer 1

182f419060f17d2319132eb94f30b7548d81c0c740977d044ef1edbb9b97233d

Answer 2

我看到了很多关于typeaheadjs和tagsinput的问题。

经历了很多麻烦之后，我找到了解决方案。

只需删除bootstrap-tagsinput.js上的最后几行：

$(function () {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});

库代码创建没有选项的tagsinput数据，因此您的预先输入选项将被忽略。

使用typeahead输入的引导标记不起作用

2 个答案: