Javascript 使用HTML和CSS进行动态框搜索

我想做一个动态搜索框，像谷歌搜索一样，带有HTML和CSS

我有以下代码：

函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

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

我的电话簿

也许这对您有所帮助，因为jQuery是自动完成的：

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags
});
} );
标签：

使用

CSS

只需添加-

#myUL {
display: none;
}

#myInput:focus + #myUL {
display: block;
}

解释-

在这里，我们最初不显示

#myUL

，一旦用户聚焦

输入元素
#myInput
，我们就可以将列表设置为
显示：块类似-

#myInput:focus + #myUL {
display: block;
}

代码片段-
函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}
*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#李美儿{
背景色：#E2；
游标：默认值；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
#密尔{
显示：无；
}
#myInput:focus+#myUL{
显示：块；
}
我的电话簿








首先，默认情况下隐藏
#myUL
元素：

#myUL {
  display: none;
}

然后，您可以选择仅在将
#myInput
悬停在以下位置时显示元素：

#myInput:focus + #myUL {
  display: block;
}

仅当第二个元素紧跟在第一个元素之后，并且两个元素都是同一父元素的子元素时，才与第二个元素匹配。将其与伪选择器结合使用可确保仅在聚焦
#myInput
时才会触发它

下面是一个工作示例：


函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}
*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
显示：无；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
/*防止双重边界*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块；
}
#李美儿{
背景色：#E2；
游标：默认值；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
#myInput:focus+#myUL{
显示：块；
}
我的电话簿








欢迎来到StackOverflow！尽管答案总是令人感激的，请。该库可能会过时，并且该页面的链接可能会在将来中断，这可能会导致。事实上，答案只不过是一个链接。用几句话概括你的图书馆如何帮助你的关键点真的会大有帮助！非常感谢，这对我很有帮助
#myInput:focus + #myUL {
  display: block;
}