码迷,mamicode.com
首页 > Web开发 > 详细

js仿百度搜索框

时间:2017-11-18 21:59:17      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:utf-8   ndt   inpu   err   ext   onload   each   round   app   

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>

 

js仿百度搜索框

标签:utf-8   ndt   inpu   err   ext   onload   each   round   app   

原文地址:http://www.cnblogs.com/chaofei/p/7857933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!