Javascript 设置自动完成输入字段显示值与实际值不同

我的表单中有一个文本字段，用这个字段填充。当从自动完成建议中选择一个值时，我希望字段中填充建议中显示的值（存储在数组

arr

），但我希望在提交表单时随POST请求一起提交另一个值（存储在数组

arr2

）

守则：

b.innerHTML += "<input type='hidden' value = '" + arr[i] + "'>";
b.addEventListener("click", function(e) {
    inp.value = this.getElementsByTagName("input")[0].value;
    closeAllLists();
});
a.appendChild(b);

2） 我尝试将value属性直接设置为

arr2

中的值，但单击建议后，输入字段将填充必须传递的值，而不是必须显示的值。代码如下：

b.innerHTML += "<input type='hidden' value = '" + arr2[i] + "'>";
b.addEventListener("click", function(e) {
    inp.value = this.getElementsByTagName("input")[0].value;
    closeAllLists();
});
a.appendChild(b);

b.innerHTML+=”；
b、 addEventListener（“单击”，函数（e）{
inp.value=this.getElementsByTagName（“输入”）[0].value；
closeAllList（）；
});
a、 儿童（b）；

创建一个新的隐藏字段，该字段将保存必须传递的值，并在以后对其进行处理

c = document.createElement("DIV");
c.innerHTML = "<input type='hidden' value = '" + arr2[i] + "' name = 'newID'>";
this.parentNode.appendChild(c);

c=document.createElement（“DIV”）；
c、 innerHTML=“”；
this.parentNode.appendChild（c）；

我认为在数据相关时使用两个独立的数组不是一个好主意。我更喜欢成对思考。因此，我使用arr（以及W3CSchools示例中的国家）作为JSON，并使用：

var countries = {
  "Afghanistan": "af",
  "Algeria": "al",
  "República Argentina": "ar",
  "Belgium": "be",
  "Chile": "ch",
};

这就是将

arr

作为键，将

arr2

作为值

对象。键（国家）

将是第二个的数组。自动完成函数的参数。在通话中：

autocomplete(document.getElementById("myInput"), Object.keys(countries));

提交时（

onSubmit

），可以将值分配给隐藏字段，该字段必须具有

name

属性

<form [...] onsubmit="prepareData()" >

我将此应用于W3CSchools示例，下面是一个工作示例

函数getCountry（）{ //我只是提醒这个值，这个代码段不会出现在任何地方 警报（国家[document.getElementById（“myInput”）.value]）； } 功能自动完成（inp、arr）{ /*autocomplete函数接受两个参数， 文本字段元素和可能的自动完成值对的json（数组）：*/ 无功电流聚焦； /*当有人在文本字段中写入时执行函数：*/ inp.addEventListener（“输入”，函数（e）{ var a，b，i，val=该值； /*关闭所有已打开的自动完成值列表*/ closeAllList（）； 如果（！val）{返回false；} currentFocus=-1； /*创建将包含以下项（值）的DIV元素：*/ a=document.createElement（“DIV”）； a、 setAttribute（“id”，this.id+“自动完成列表”）； a、 setAttribute（“类”、“自动完成项”）； /*将DIV元素作为自动完成容器的子元素追加：*/ this.parentNode.appendChild（a）； /*对于数组中的每个项*/ 对于（i=0；i”+arr[i].substr（0，val.length）+“”； b、 innerHTML+=arr[i].substr（val.length）； /*插入将保存当前数组项值的输入字段：*/ b、 innerHTML+=“”； /*当有人单击项值（DIV元素）时执行函数：*/ b、 addEventListener（“单击”，函数（e）{ /*插入自动完成文本字段的值：*/ inp.value=this.getElementsByTagName（“输入”）[0].value； /*关闭自动完成值的列表， （或任何其他打开的自动完成值列表：*/ closeAllList（）； }); a、 儿童（b）； } } }); /*按键盘上的键执行功能：*/ inp.addEventListener（“向下键控”，函数（e）{ var x=document.getElementById（this.id+“自动完成列表”）； 如果（x）x=x.getElementsByTagName（“div”）； 如果（e.keyCode==40）{ /*如果按下向下箭头键， 增加currentFocus变量：*/ currentFocus++； /*并使当前项目更加可见：*/ addActive（x）； }如果（e.keyCode==38）{//up /*如果按下向上箭头键， 减小currentFocus变量：*/ 当前焦点--； /*并使当前项目更加可见：*/ addActive（x）； }否则如果（e.keyCode==13）{ /*如果按ENTER键，则阻止提交表单*/ e、 预防默认值（）； 如果（当前焦点>-1）{ /*并模拟单击“活动”项：*/ 如果（x）x[currentFocus]。单击（）； } } }); 函数addActive（x）{ /*将项目分类为“活动”的函数：*/ 如果（！x）返回false； /*首先删除所有项目上的“活动”类：*/ 清除活性（x）； 如果（currentFocus>=x.length）currentFocus=0； 如果（currentFocus<0）currentFocus=（x.length-1）； /*添加类“自动完成活动”：*/ x[currentFocus].classList.add（“自动完成活动”）； } 函数removeActive（x）{ /*从所有自动完成项中删除“活动”类的函数：*/ 对于（变量i=0；i<form [...] onsubmit="prepareData()" >

function prepareData() {
  document.getElementById("myHiddenField").value = countries[document.getElementById("myInput").value];
}