Implement Baidu's keyword search box with JS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>



  <style>
    * {
    
    
      margin: 0;
      padding: 0;
    }


    #search {
    
    
      width: 600px;
      margin: 0 auto;
      margin-top: 300px;
      position: relative;
    }

    #search input {
    
    

      width: 480px;
      height: 100%;
      border: 1px solid #b6b6b6;
      height: 20px;
      padding: 9px 7px;
      font: 16px arial;
      border: 1px solid #b8b8b8;
      border-bottom: 1px solid #ccc;
      border-right: 0;
      vertical-align: top;
      outline: none;
      box-shadow: none;
      -webkit-appearance: textfield;
      background-color: white;
      -webkit-rtl-ordering: logical;
      user-select: text;

    }

    #search button {
    
    
      cursor: pointer;
      box-sizing: border-box;
      width: 97px;
      height: 40px;
      line-height: 38px;
      padding: 0;
      border: 0;
      background: none;
      background-color: #38f;
      font-size: 16px;
      color: white;
      box-shadow: none;
      font-weight: normal;
      margin-left: -20px;
    }

    .result {
    
    
      position: absolute;

      padding: 9px 7px;
      background: #ddd;

    }

    .search-res {
    
    
      position: absolute;
      top: 100%;
      left: 0;
      width: 480px;
      border: 1px solid #b6b6b6;
      border-top: none;
    }

    .search-res li {
    
    
      list-style-type: none;
      line-height: 20px;
      padding: 2px 5px;
      border-bottom: 1px solid #b6b6b6;
    }
  </style>


</head>

<body>

  <div id="search">
    <input type="text">
    <button>bai度一下</button>
    <ul class="search-res">

    </ul>
  </div>

  <script>
    let inptObj = document.querySelector('input');
    let ulObj = document.querySelector('ul');

    let t = "";
    inptObj.oninput = function(){
    
    
            clearTimeout(t);
            t = setTimeout(()=>{
    
    
                let val = this.value;
            sc(val)
        },2000) 
    }
    function sc(val) {
    
    
        let script = document.createElement('script');
        script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
        document.head.appendChild(script);
        script.remove();
    }

    function callback(data) {
    
    
        let kw = data.s;
        console.log(kw)
        kw.forEach((val)=>{
    
    
        let liObj = document.createElement('li');
        liObj.innerHTML = val;
        ulObj.appendChild(liObj);
        })
    }
  </script>

</body>

</html>
Implement Baidu's keyword search box with JS

Guess you like
