如何在HTML输入列表中隐藏条目内的[numeric_id]并正常提交表单？

我给你提供一个完全适配需求的实现方式——既不用限制用户输入，又能在提交时保留ID信息，同时让输入框只显示友好的名称，核心思路是用隐藏输入框存储ID，配合JavaScript自动拆分显示文本和ID：

步骤1：修改表单，添加隐藏输入框 #

先给你的表单新增一个type="hidden"的输入框，专门用来存储好友的numeric_id：

<form action="/chat_forwarding/modal_edit_msg.php" id="fwd-form" method="POST" class="form-inline" style="display: block;">
  <!-- 原输入框 -->
  <input list="mylist" id="my-input" name="friend-name" placeholder="Begin typing friend's name here..." required class="form-control">
  <!-- 你的datalist（示例选项） -->
  <datalist id="mylist">
    <option value="Mike [789]">
    <option value="Sarah [101112]">
  </datalist>
  <!-- 新增隐藏输入框，用于存储ID -->
  <input type="hidden" name="friend-id" id="friend-id">
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

步骤2：添加JavaScript处理逻辑 #

通过监听输入框的选择事件和表单提交事件，自动拆分输入内容中的名称和ID：

const inputField = document.getElementById('my-input');
const hiddenIdField = document.getElementById('friend-id');
const form = document.getElementById('fwd-form');

// 当用户从datalist选择选项时触发处理
inputField.addEventListener('change', processInputValue);

// 表单提交前最后校验处理，防止用户手动输入未匹配的内容
form.addEventListener('submit', function(e) {
  processInputValue();
  
  // 可选：验证用户选择了有效的选项，避免提交无效内容
  if (!hiddenIdField.value) {
    e.preventDefault();
    alert('请选择一个有效的好友名称哦');
  }
});

// 核心处理函数：拆分名称和ID
function processInputValue() {
  const inputValue = inputField.value.trim();
  // 正则匹配"名称 [数字ID]"的格式
  const matchResult = inputValue.match(/^(.*?)\s+\[(\d+)\]$/);
  
  if (matchResult) {
    // 提取名称和ID
    const [_, friendName, friendId] = matchResult;
    // 输入框只显示好友名称
    inputField.value = friendName.trim();
    // 隐藏框存储ID，提交时会被发送到后端
    hiddenIdField.value = friendId;
  } else {
    // 如果没有匹配到有效格式，清空隐藏框（可根据业务需求调整）
    hiddenIdField.value = '';
  }
}

方案优势 #

• 完全符合你的需求：不限制用户输入（不用pattern属性），用户输入或选择后，输入框自动只显示友好的名称
• ID信息通过隐藏输入框提交，后端可以直接通过friend-id参数获取
• 表单提交前的校验可以防止用户提交无效内容（可选，可根据你的业务场景去掉）

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