Bootstrap TagsInput通过JS设置初始值失败及数据源更新问题

问题1：JS设置初始值后标签输入框不更新 #

直接执行以下代码后，val()返回值正确，但标签输入框未同步显示标签：

$("#fruits").val("A");
$("#fruits").val(); // 返回"A"

解决方案 #

bootstrap-tagsinput不能通过原生val()方法更新标签，必须使用组件专属API：

• 添加单个标签：调用tagsinput('add', '标签内容')
• 添加多个标签：传入数组，如tagsinput('add', ['A', 'B', 'C'])
• 如需清空现有标签再添加，先执行tagsinput('removeAll')

示例代码：

// 清空所有标签
$("#fruits").tagsinput('removeAll');
// 添加单个标签
$("#fruits").tagsinput('add', 'A');
// 批量添加标签
$("#fruits").tagsinput('add', ['A', 'Banana', 'Cherry']);

关于refresh方法：该方法用于手动刷新标签显示，通常在修改组件内部数据后调用，用法：

$("#fruits").tagsinput('refresh');

注：一般调用添加/移除标签的API后会自动触发刷新，无需手动调用。

问题2：typeahead数据源更新后无变化 #

修改数据源后，typeahead仍使用旧数据，临时方案是重新创建DOM元素，不够优雅。

解决方案 #

通过typeahead底层的Bloodhound实例更新数据源，无需重建DOM：

1. 初始化时保存Bloodhound实例引用
2. 更新时调用实例的clear()和add()方法，再重新绑定typeahead

示例代码：

// 初始化Bloodhound实例并保存引用
var tagBloodhound = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: initialTags // 初始数据源
});

// 初始化tagsinput与typeahead
$("#fruits").tagsinput({
  typeaheadjs: [
    { hint: true, highlight: true, minLength: 1 },
    { name: 'tags', source: tagBloodhound.ttAdapter() }
  ],
  confirmKeys: [13, 32, 44],
});

// 更新数据源的函数
function updateTagDataSource(newTags) {
  tagBloodhound.clear(); // 清空旧数据
  tagBloodhound.add(newTags); // 添加新数据
  // 重新绑定typeahead以生效
  var $input = $("#fruits").data('tagsinput').$input;
  $input.typeahead('destroy');
  $input.typeahead(
    { hint: true, highlight: true, minLength: 1 },
    { name: 'tags', source: tagBloodhound.ttAdapter() }
  );
}

内容的提问来源于stack exchange，提问作者Adder