Rails编辑表单中jQuery Autocomplete的AJAX提交及回车提交问题

我明白你的痛点——不想重复写AJAX代码，同时要让回车键和Add按钮都能触发标签添加的逻辑。其实核心思路是把重复的AJAX提交逻辑抽成独立函数，然后让不同的触发源（自动补全选中、回车、按钮点击）都调用这个函数就好。

步骤1：提取AJAX提交逻辑为独立函数 #

把原来写在autocomplete的select回调里的AJAX代码抽出来，变成一个可以复用的函数，这样不管什么触发方式，都能传标签名进去调用：

function submitTag(tagName) {
  $.ajax({
    type: "POST",
    url: "/add_tag",
    data: { 
      ppe: { 
        id: <%= @ppe.id %>,
        new_tag: tagName 
      } 
    },
    success: function (data) {
      // 成功后的优化操作：清空输入框，方便继续添加下一个标签
      $("#add_tag").val('');
      // 这里还可以加更新页面标签列表的逻辑，比如重新渲染已添加标签
    },
    error: function (data) {
      // 错误处理，比如在控制台打印信息或给用户提示
      console.error("添加标签失败:", data);
    }
  });
}

步骤2：修改自动补全的select事件 #

原来的select回调直接调用这个新函数即可，减少冗余代码：

.autocomplete({
  minLength: 0,
  autoFocus: true,
  source: availableTags,
  select: function( event, ui ) {
    submitTag(ui.item.value);
    return false; // 阻止自动填充输入框（如果需要保留选中值可以去掉这行）
  }
});

步骤3：处理回车键事件 #

在keydown事件监听里，检测到回车键（keyCode 13）时，获取输入框的当前值，调用submitTag，同时阻止默认的表单提交行为：

.on("keydown", function (event) {
  if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
    event.preventDefault();
  }
  // 处理回车键提交自定义标签
  if (event.keyCode === 13) {
    event.preventDefault();
    // 去除输入值前后空格，避免空标签或无效标签
    const tagValue = $(this).val().trim();
    if (tagValue) {
      submitTag(tagValue);
    }
    return false;
  }
})

步骤4：绑定Add Tag按钮的点击事件 #

给按钮添加click事件监听，同样获取输入框的值并调用submitTag，确保点击按钮也能触发AJAX请求：

$("#tag-submit").on("click", function(event) {
  event.preventDefault();
  const tagValue = $("#add_tag").val().trim();
  if (tagValue) {
    submitTag(tagValue);
  }
});

完整修改后的代码 #

整合所有部分后的完整代码如下：

<div class="field h4"> 
  Add Tags:<%= text_field_tag 'add_tag' %> 
  <button id="tag-submit" class="btn btn-sm btn-brand">Add Tag</button> 
</div>

<script> 
$(function () { 
  var availableTags = <%= raw( Tag.all.pluck(:name) ) %>;

  // 复用的AJAX提交函数
  function submitTag(tagName) {
    $.ajax({
      type: "POST",
      url: "/add_tag",
      data: { 
        ppe: { 
          id: <%= @ppe.id %>,
          new_tag: tagName 
        } 
      },
      success: function (data) {
        $("#add_tag").val('');
      },
      error: function (data) {
        console.error("添加标签失败:", data);
      }
    });
  }

  $("#add_tag") 
    .on("keydown", function (event) {
      if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
        event.preventDefault();
      }
      // 回车键处理
      if (event.keyCode === 13) {
        event.preventDefault();
        const tagValue = $(this).val().trim();
        if (tagValue) {
          submitTag(tagValue);
        }
        return false;
      }
    })
    .autocomplete({
      minLength: 0,
      autoFocus: true,
      source: availableTags,
      select: function( event, ui ) {
        submitTag(ui.item.value);
        return false;
      }
    });

  // Add Tag按钮点击事件
  $("#tag-submit").on("click", function(event) {
    event.preventDefault();
    const tagValue = $("#add_tag").val().trim();
    if (tagValue) {
      submitTag(tagValue);
    }
  });
}); 
</script>

额外说明 #

• 加入了trim()处理输入值，避免用户输入空标签或前后带空格的无效标签；
• 所有触发源都通过event.preventDefault()阻止了默认行为，确保不会触发整个页面表单的提交；
• 成功回调里添加了清空输入框的逻辑，优化用户连续添加标签的体验。

这样不管是自动补全选中、按回车还是点击按钮，都会调用同一个AJAX逻辑，完全避免了代码冗余，同时满足了你的需求。

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