<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#list{
background: #333;
display: none;
color: #fff;
list-style-type: none;
margin:0;
padding: 0;
text-align: center;
}
#list>li:hover{
width: 100%;
background: rgba(102, 102, 235, 0.514);
}
</style>
</head>
<body>
<div style="width: 200px;">
<input type="text" onfocus="focus1()" value="" id="inp">
<ul id="list" onclick="dian()">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
// 获取ul
let list = document.getElementById('list')
// 获取input
let inp = document.getElementById('inp')
// 获取焦点时ul显示
function focus1(){
console.log(inp);
list.style.display='block'
}
// 点击当前项,把当前项的值赋给input,并失去焦点
function dian(){
console.log(event.target.outerText);
inp.value=event.target.outerText
blur1()
}
// 失去焦点时ul隐藏
function blur1(){
// console.log(list.style);
list.style.display='none'
}
</script>
</body>
</html>