Javascript 输入时按钮触发下拉/自动完成

我复制了一个（包括我的更改（）），它在输入本身上完美地工作。但是现在我做了一个新的，像这样的，当你点击输入框旁边的按钮时，应该也会打开列表。但是它没有附加函数创建的html元素

我没有发现任何错误，它贯穿整个函数。。我认为它只是没有创建HTML元素

有人知道我做错了什么吗

$（函数（）{
var klantInput=document.getElementById（'klantTextInput'）；
var btn=document.getElementById（'klanten-expand'）；
自动完成TNTO输入（btn，klantInput）
})
功能自动完成TNTO输入（btn，inp）{
var arr=['customer0.5'，'customer1'，'customer2'，'customer3'，'customer4'，'customer5'，]；
无功电流聚焦；
/*当有人单击按钮时执行一项功能：*/
btn.addEventListener（“点击”，函数（e）{
var a，b，i，val=输入值；
/*关闭所有已打开的自动完成值列表*/
closeAllList（）；
currentFocus=-1；
/*创建将包含以下项（值）的DIV元素：*/
a=document.createElement（“DIV”）；
a、 setAttribute（“id”，inp.id+“自动完成列表”）；
a、 setAttribute（“类”、“自动完成项”）；
/*将DIV元素作为自动完成容器的子元素追加：*/
控制台日志（a）；
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=inp.getElementsByTagName（“输入”）[0]。值；
/*关闭自动完成值的列表，
（或任何其他打开的自动完成值列表：*/
closeAllList（）；
});
控制台日志（b）；
控制台日志（a）；
a、 儿童（b）；
}
}
});
/*按键盘上的键执行功能：*/
btn.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

.klantTextInput{
位置：相对位置；
显示：内联块；
宽度：钙（50%-18px）；
显示：内联块；
浮动：左；
右边界：0；
边框右下半径：0；
边框右上角半径：0；
大纲：无；
}
.klantTextInput：焦点{
边框：1px实心rgb（164164164）；
}
克拉滕先生{
边框底部：1px实心rgb（204204204）；
页边顶部：1px；
宽度：18px；
高度：20px；
背景颜色：绿色；
显示：内联块；
溢出：隐藏；
}
.klantTextInput:悬停+.klanten展开，
.klanten展开：悬停{
背景位置：-54px-176px；
}
.klantTextInput:活动+.klanten展开，
.klanten扩展：活动，
.klantTextInput:焦点+.klanten展开，
克拉滕：重点{
背景位置：-90px-176px；
}
.自动完成项目{
位置：绝对位置；
边框：1px实心#d4；
边框底部：无；
z指数：99；
/*将自动完成项目定位为与容器相同的宽度：*/
最高：100%；
左：0；
右：0；
边框底部：1px实心#d4；
最大高度：150像素；
溢出y：自动；
}
.自动完成项目.项目{
左侧填充：5px；
光标：指针；
背景色：#fff；
}
.autocomplete items div:悬停，
.自动完成活动{
颜色：#000；
背景色：#C2C2；
}

科兰特：

您能检查一下吗， 您忘记将“自动完成”类指定给KlantTextInputs父div， 我已经更新了你的代码

检查下图

$（函数