js仿百度搜索框

1.js仿百度搜索框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function show(json){
        let oUl=document.getElementById('ul1');
        oUl.innerHTML='';
        json.s.forEach(str=>{
          let oLi=document.createElement('li');
          oLi.innerHTML=str;
          oUl.appendChild(oLi);
        })
      }
    </script>
    <script>
      window.onload=function(){
        let oTxt=document.getElementById('txt1');
        let oUl=document.getElementById('ul1');

        oTxt.oninput=function(){
          let oS=document.createElement('script');
          oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;
          document.head.appendChild(oS);
        }
      }
    </script>
  </head>
  <body>
<input type="text" id="txt1">
<ul id="ul1">

</ul>
  </body>
</html>

2.jq仿百度搜索框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery.js">
    </script>
    <script>
      $(function(){
        $('#txt1').on('input',function(){
          $.ajax({
            url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
            data:{wd:$('#txt1').val()},
            dataType:'jsonp',
            jsonp:'cb',
            success(json){
              $('#ul1').html('');
              json.s.forEach(str=>{
                $(`<li>${str}</li>`).appendTo($('#ul1'));
              })
            },
            error(){
              alert('错了')
            }
          })
        })
      })
    </script>
  </head>
  <body>
<input type="text" id="txt1">
<ul id="ul1">

</ul>
  </body>
</html>