js实现下拉框功能

<!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>