使用Typeahead时，Bootstrap Tagsinput失焦后无法将文本转为标签

安全阿岳

2026-5-20

解决Bootstrap Tagsinput + Typeahead失焦后文本不自动转标签的问题

我之前碰到过一模一样的问题，默认情况下Bootstrap Tagsinput在结合Typeahead使用时，确实不会自动把输入框失焦时的文本转为标签——这是因为Typeahead的交互逻辑会覆盖掉Tagsinput的默认自动转换行为。不过我们可以手动添加一个失焦事件监听来解决这个问题。

解决方案步骤：

给#task_tags输入框绑定blur事件
在事件回调中获取当前输入的文本内容，去除首尾空格后判断是否有效
如果文本有效，调用Tagsinput的add方法将其转为标签，然后清空输入框

修改后的完整代码：

HTML部分（保持原有结构不变）

<div class="form-group"> 
  <label class="control-label">Tags</label> 
  <input type="text" class="form-control ticketData" id="task_tags" name="task_tags" value="{{$taskTags}}" data-role="tagsinput" placeholder="Add tags as Tag 1, Tag 2,"> 
</div>

JavaScript部分（新增失焦事件处理逻辑）

// 初始化Tagsinput与Typeahead组件
$('#ticketDetails #task_tags').tagsinput({ 
  typeaheadjs: { 
    name: 'tasktagnames', 
    displayKey: 'value', 
    valueKey: 'value', 
    source: tasktagnames.ttAdapter() 
  } 
});

// 添加失焦事件，自动转换输入文本为标签
$('#ticketDetails #task_tags').on('blur', function() {
  const inputText = $(this).val().trim();
  // 检查文本非空且未被添加为标签
  if (inputText && !$(this).tagsinput('items').some(item => item === inputText)) {
    $(this).tagsinput('add', inputText);
    $(this).val(''); // 清空输入框避免残留内容
  }
});