原生js模拟百度搜索

1.页面结构

<div class="wrap">
     <div class="inp"><input type="text"></div>
     <div class="result">
     </div>
</div>

2.样式

* {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }

        .wrap .inp {
            width: 500px;
            height: 50px;
            border: 1px solid #051cee60;
        }

        .wrap input {
            display: block;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            text-indent: 10px;
            font-size: 15px;
        }

        .result {
            width: 100%;
            border: 1px solid #eee;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .result ul {
            list-style: none;
        }

        .result ul li {
            line-height: 24px;
            cursor: pointer;
            text-indent: 20px;
        }

        .result ul li a {
            color: black;
            font-size: 14px;
            text-decoration: none;
        }

3.js

const wrap = document.querySelector('.wrap');
const inp = document.querySelector('.inp');
const input = wrap.querySelector('input');
const result = document.querySelector('.result');

input.onfocus = function () {
      inp.style.cssText = `border: 1px solid #005caf;`;
      result.style.display = 'block'
}
input.onblur = function () {
      inp.style.cssText = `border: 1px solid #051cee60;`;
      result.style.display = 'none'
}
function baidu(data) {
      console.log(data.s.length);
      let ul = '<ul>';
      for (const value of data.s) {
           ul += `
               <li>
                 <a href="#">${value}</a>
               </li>
                `;
      }
      ul += '</ul>';
      result.innerHTML = ul;

      const lilist = document.querySelectorAll('li');
      for (let i = 0; i < lilist.length; i++) {
      		lilist[i].onmouseover = function () {
            	this.style.cssText = `background-color:#c9c9c9`;
            }
            lilist[i].onmouseout = function () {
                this.style.cssText = `background-color:#fff`;
            }
      }
}

input.oninput = function () {
      let sc = document.createElement('script');
      sc.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + input.value + '&cb=baidu'
      document.body.appendChild(sc);
}