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>