Javascript w3school自动完成设置显示的最大元素数

Javascript w3school自动完成设置显示的最大元素数,javascript,html,Javascript,Html,我从w3school得到了这个代码片段,我使用的代码片段可以在下面找到 我试图减少autocomplete元素,使其最多只显示5个元素 我该怎么做 在输入中键入名称“Arweave” 常量集=[{ 名称:“Arweave”, 图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616" }, { 名称:“Arweave”, 图像:“https://assets.coingeck

我从w3school得到了这个代码片段,我使用的代码片段可以在下面找到

我试图减少autocomplete元素,使其最多只显示5个元素

我该怎么做

在输入中键入名称“Arweave”

常量集=[{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
{
名称:“Arweave”,
图像:“https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"
},
]
功能自动完成(inp、arr){
/*autocomplete函数接受两个参数,
文本字段元素和可能的自动完成值数组:*/
无功电流聚焦;
/*当有人在文本字段中写入时执行函数:*/
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].name.substr(0,val.length)+“”;
b、 innerHTML+=arr[i].name.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
*{
框大小:边框框;
}
身体{
字体:16px Arial;
}
/*容器必须相对以下位置放置:*/
.自动完成{
位置:相对位置;
显示:内联块;
}
img{
宽度:20px;
右边距:5px;
}
输入{
边框:1px实心透明;
背景色:#f1f1;
填充:10px;
字体大小:16px;
}
输入[类型=文本]{
背景色:#f1f1;
宽度:100%;
}
输入[类型=提交]{
背景色:淡蓝色;
颜色:#fff;
光标:指针;
}
.自动完成项目{
位置