html搜索框点击出现提示,js实现搜索提示框效果

本文实例为大家分享了js实现搜索提示框效果的具体代码，供大家参考，具体内容如下

首先写静态页面

CSS样式

* {

margin: 0;

padding: 0;

}

html,

body {

background: darkgray;

}

.container {

position: absolute;

left: 50%;

top: 50px;

transform: translateX(-50%);

}

#search {

width: 300px;

height: 50px;

padding-left: 10px;

border-radius: 5px;

border: none;

outline: none;

}

#alert {

width: 312px;

position: relative;

left: -1px;

display: none; /* 将ul列表隐藏 */

}

#alert > ul {

list-style: none;

margin: 0;

padding: 0;

}

#alert > ul > li {

border: 0.5px solid #000;

height: 40px;

line-height: 40px;