Javascript 限制搜索栏结果JS和HTML的数量

我想限制搜索栏中搜索结果的数量，因为当我有很多搜索查询时，它会覆盖整个页面。有没有办法在查询达到一定数量后限制结果的数量或添加滚动条？例如，如果有15个查询，我可以将其缩短为5个并添加一个滚动条吗

函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1&&filter！=“”）{//在此处更改
李[i].style.display=“”；
li[i].style.visibility=“visible”//在此处更改
}否则{
li[i].style.display=“无”；
}
}
}

#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：500px；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
边界半径：4px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
宽度：558px；
位置：绝对位置；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}

您可以在

ul

元素中添加

max height

，并设置

overflow-y:auto。如果
ul
低于
max height
，滚动条将不显示，如果高于
max height
，滚动条将显示。在这种情况下，由于您最多需要5个结果，因此可以将
max height
设置为类似
calc（47px*5）
。您还需要设置
ul.style.visibility=“visible”以显示滚动条


函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1&&filter！=“”）{//在此处更改
李[i].style.display=“”；
li[i].style.visibility=“visible”//在此处更改
ul.style.visibility=“可见”//添加此
}否则{
li[i].style.display=“无”；
}
}
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：500px；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
边界半径：4px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
宽度：558px；
位置：绝对位置；
/*添加以下两行*/
溢出y：自动；
最大高度：计算（47px*5）；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}














您需要为您的
ul
设置
高度。然后，在CSS中添加
溢出
，如下所示：


函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1&&filter！=“”）{//在此处更改
li[i].style.display=“block”；
}否则{
li[i].style.display=“无”；
}
}
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：500px；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
边界半径：4px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
宽度：558px；
位置：绝对位置；
高度：150像素；
溢出：自动；
}
#李妙儿{
显示：无；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}