直接复制，即可运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aa {
float: left;
width: 90px;
height: 30px;
line-height: 30px;
background-color: aqua;
box-sizing: border-box;
border-right: 1px solid red;
font-weight: 700;
text-align: center;
}
.box {
border: 1px solid red;
width: 320px;
height: 30px;
margin: 100px auto;
position: relative;
}
.box::after {
content: "";
display: block;
position: absolute;
right: 30px;
top: 0;
width: 0;
height: 30px;
border-right: 1px solid red;
}
* {
margin: 0;
padding: 0;
}
.box input {
border: 0;
width: 200px;
height: 30px;
float: left;
box-sizing: border-box;
text-indent: 10px;
}
i {
width: 30px;
cursor: pointer;
height: 100%;
position: relative;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
height: 20px;
line-height: 20px;
text-indent: 12px;
}
ul {
position: absolute;
left: 0;
padding-top: 10px;
width: 100%;
}
li {
border: 1px solid black;
box-sizing: border-box;
width: 100%;
cursor: pointer;
}
li:hover {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="aa">百度一下</div><input name="search" type="text" /><i><svg t="1589713208024" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1798" width="24" height="24"><path d="M960 876.8l-134.4-140.8c44.8-64 70.4-140.8 70.4-224 0-211.2-172.8-384-384-384S128 300.8 128 512s172.8 384 384 384c83.2 0 160-25.6 217.6-70.4l134.4 140.8c25.6 25.6 64 25.6 89.6 0C985.6 940.8 985.6 902.4 960 876.8zM512 768c-140.8 0-256-115.2-256-256 0-140.8 115.2-256 256-256s256 115.2 256 256C768 652.8 652.8 768 512 768z" p-id="1799"></path></svg></i>
</div>
<script>
function lol() {
var text = this.innerText;
input.value = text;
qwq();
}
function fff() {
var ccc = box.getElementsByTagName("ul");
if (ccc.length != 0) {
box.removeChild(ccc[0]);
}
}
function qwq() {
fff();
if (input.value == "") {
return;
}
var aaa = document.createElement("ul");
obj.forEach(function(value) {
if (value.indexOf(input.value) != -1) {
var bbb = document.createElement("li");
bbb.onclick = lol;
bbb.innerText = value;
aaa.appendChild(bbb);
}
});
if (aaa.childElementCount != 0) {
box.appendChild(aaa);
}
}
var obj = ["你好nino", "你好nno", "你好nin", "你nino", "123", "135", "12466", "1234", "12345"];
var input = document.getElementsByTagName("input")[0];
var box = document.getElementsByClassName("box")[0];
input.onkeyup = qwq;
input.onclick = qwq;
box.addEventListener("click", function(e) {
input.style.border = "3px solid skyblue";
e.stopPropagation(); //组织事件冒泡
});
window.addEventListener("click", function() {
fff();
input.style.border = "0";
});
</script>
</body>
</html>