Rails 6.1集成acts-as-taggable-on与selectize.js的问题求助

问题1：表单不展示已关联标签、提交后覆盖原有标签 #

根因 #

输入框未填充已绑定的标签值，selectize初始化时读取不到初始已选标签，提交表单时仅会传入当前输入框内的新标签值，直接覆盖原有标签。

修复步骤 #

修改表单标签，给输入框显式设置value为当前对象已绑定标签的逗号分隔字符串：

<%= form.text_field :tag_list, class: "p-1 font-size-m mb-1 selectize-tags", id: 'tag-select', value: form.object.tag_list.join(',') %>

同时确保控制器强参数中放开tag_list字段权限：

# 对应控制器的参数校验方法
def entry_params
  params.require(:entry).permit(你的其他业务字段, :tag_list)
end

问题2：新增标签不展示在下拉选项 #

根因 #

现有代码的标签选项是页面首次加载时通过ERB渲染的静态数据，后续新增的标签不会主动同步到selectize的选项池内。

修复步骤 #

调整js.erb代码，增加DOM加载等待、标签内容转义、新标签同步逻辑：

$(function() {
  // 渲染全量标签选项，用to_json自动处理转义避免JS语法错误
  <% all_tags = ActsAsTaggableOn::Tag.all.uniq.pluck(:name) %>
  const allTagOptions = <%= raw all_tags.map { |name| {text: name, value: name} }.to_json %>;

  $(".selectize-tags").selectize({
    delimiter: ",",
    persist: true,
    allowEmptyOption: false,
    options: allTagOptions,
    sortField: "text",
    create: function (input) {
      return {
        value: input,
        text: input,
      };
    },
    // 可选配置：新增标签后同步到当前页面所有selectize实例的选项池
    onOptionAdd: function(value, data) {
      $(".selectize-tags").each(function() {
        const selectizeInstance = $(this)[0].selectize;
        if (selectizeInstance && !selectizeInstance.options[value]) {
          selectizeInstance.addOption(data);
          selectizeInstance.refreshOptions();
        }
      });
    }
  });
});

修改后页面内新增的标签会实时加入下拉选项，页面刷新后会自动拉取全量最新标签。

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