使用预先输入的引导标记输入不起作用答案

【问题标题】：Bootstrap tags input with typeahead does not work使用预先输入的引导标记输入不起作用
【发布时间】：2015-08-12 10:08:46
【问题描述】：

我想将标签的使用限制为仅从 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。

【问题讨论】：

如果你想限制只添加一组明确的值的标签，也许 Bootstrap Multiselect 比 Bootstrap 标签输入更符合你的需求？这是link。
和here 你可以找到更多的增强版。我认为没有任何理由让用户有机会在您的案例中输入一些文本。
我宁愿像 StackOverflow 那样使用标签库
尝试将data-role="tagsinput" 添加到您的input 标签中。
Bootstrap Tagsinput with Typeahead not working的可能重复

标签： bootstrap-typeahead bootstrap-tags-input

【解决方案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();

【讨论】：

请对您的代码 sn-p 提供一些解释

【解决方案2】：

我发现 typeaheadjs 和 tagsinput 存在很多问题。

头疼了好久，终于找到了解决办法。

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

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

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

【讨论】：