Javascript 将预选选项中的文本自动完成输入

我正在尝试实现一个自动完成文本函数，其中您从选项中选择了字符串的一部分

你应该首先选择你想要的饮料类型，在“选项”中选择后键入字符计数

开始代码段：js hide:false控制台：true babel:false

语言：lang html

function insertFunction（）{
var x=document.getElementById（“mySelect”）.value；
document.getElementById（“myInput”）.value=x；
}
功能自动完成（inp、arr）{
无功电流聚焦；
inp.addEventListener（“输入”，函数（e）{
var a，b，i，val=该值；
closeAllList（）；
如果（！val）{
返回false；
}
currentFocus=-1；
a=document.createElement（“DIV”）；
a、 setAttribute（“id”，this.id+“自动完成列表”）；
a、 setAttribute（“类”、“自动完成项”）；
this.parentNode.appendChild（a）；
对于（i=0；i”+arr[i].substr（0，val.length）+“”；
b、 innerHTML+=arr[i].substr（val.length）；
b、 innerHTML+=“”；
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++；
addActive（x）；
}否则如果（e.keyCode==38）{
当前焦点--；
addActive（x）；
}否则如果（e.keyCode==13）{
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

*{
框大小：边框框；
}
身体{
字体：16px Arial；
}
.自动完成{
位置：相对位置；
显示：内联块；
}
输入{
边框：1px实心透明；
背景色：#f1f1；
填充：10px；
字体大小：16px；
}
输入[类型=文本]{
背景色：#f1f1；
宽度：100%；
}
输入[类型=提交]{
背景色：淡蓝色；
颜色：#fff；
光标：指针；
}
.自动完成项目{
位置：绝对位置；
边框：1px实心#d4；
边框底部：无；
边界顶部：无；
z指数：99；
最高：100%；
左：0；
右：0；
}
.autocomplete items div{
填充：10px；
光标：指针；
背景色：#fff；
边框底部：1px实心#d4；
}
.自动完成项目div:悬停{
背景色：#e9e9e9；
}
.自动完成活动{
背景色：道奇蓝！重要；
颜色：#ffffff；
}

选择：

酒精的
不含酒精
欢乐时光特价
自动完成

您可以这样做，通过将每个类别添加到一个数组中，它会更干净

功能自动完成（inp、arra）{
/*autocomplete函数接受两个参数，
文本字段元素和可能的自动完成值数组：*/
无功电流聚焦；
/*当有人在文本字段中写入时执行函数：*/
inp.addEventListener（“输入”，函数（e）{
var mySelect=document.getElementById（“mySelect”）.value；
var arr=arra[mySelect]
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