bootstrap-typeahead - 使用预先输入的引导标记输入不起作用

Question

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

“对象作为标签”示例似乎是我正在寻找的，但 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

var tags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://example.com/tags',
    filter: function(response) {
      return response;
    }
  }
});
tags.initialize();

Answer 2

我看到 typeaheadjs 和 tagsinput 有很多问题。

经过很多头痛后，我找到了解决方案。

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

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

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