如何实现自动完成输入框显示值与POST提交值不同？

要实现点击自动完成建议时显示友好的展示文本，表单提交时传递对应实际业务值的需求，你需要调整两个核心逻辑：正确绑定选项的双值关联和点击时同步更新输入框与提交字段。

核心思路 #

• 给每个自动完成选项同时绑定展示文本（arr[i]）和对应的提交值（arr2[i]）
• 点击选项时完成两个操作：
  1. 让输入框显示arr[i]的友好文本
  2. 将对应的arr2[i]存入一个专属的隐藏输入框，表单提交时会自动传递这个隐藏框的值

修正后的代码实现 #

首先，在页面中给输入框配对一个隐藏提交字段（通过ID方便后续获取）：

<!-- 你的自动完成输入框 -->
<input type="text" id="autocomplete-inp">
<!-- 新增隐藏输入框，专门存储要提交的实际值 -->
<input type="hidden" id="actual-submit-value">

然后修改自动完成建议的生成与点击事件逻辑：

// 假设这是你遍历arr生成建议的循环部分
for (let i = 0; i < arr.length; i++) {
  let b = document.createElement("div");
  // 在选项元素上存储对应的提交值
  b.dataset.actualValue = arr2[i];
  // 选项显示友好的展示文本
  b.textContent = arr[i];
  
  b.addEventListener("click", function(e) {
    const inp = document.getElementById("autocomplete-inp");
    const submitInput = document.getElementById("actual-submit-value");
    
    // 输入框展示友好文本
    inp.value = this.textContent;
    // 隐藏框存入实际要提交的值
    submitInput.value = this.dataset.actualValue;
    
    closeAllLists();
  });
  
  a.appendChild(b);
}

为什么你之前的尝试没成功？ #

• 尝试1中，你错误使用了data-value的获取方式（应该用element.dataset.value或getAttribute('data-value')），并且错误地把输入框的值设为了提交值，导致输入框无法显示友好文本。
• 尝试2直接将选项的value设为提交值，自然点击后输入框会显示业务值，违背了“显示友好文本”的需求。

这样调整后，用户选择建议时输入框展示的是易读的文本，表单提交时会传递隐藏框里的实际业务值，完美匹配你的需求。

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