跨域加载：搜索输入关键字实时更新

来源：互联网发布：mac终端更改系统时间编辑：程序博客网时间：2024/06/06 12:32
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            body{                padding: 50px;            }            *{                padding: 0;                margin: 0;            }            input{                width: 300px;                height: 30px;            }            ul{                width: 302px;                border: 1px solid #ddd;                display: none;            }            ul li{                width: 302px;                height: 20px;                list-style: none;            }            ul li a{                color: #000;                text-decoration: none;            }            ul li a:hover{                color: lightseagreen;            }        </style>    </head>    <body>        <input type="text" name="text" id="text" value="" />        <ul>        </ul>    </body>    <script type="text/javascript">        function fn(data){            var oUl=document.querySelector('ul');            var html='';            var arr=data.s;            for (var i=0;i<arr.length;i++) {            /*地址在百度首页输入框f12netwo可查，关键字wd=  cb（callb）*/                html+='<li><a target="_blank" href="https://www.baidu.com/s?wd='+arr[i]+'">'+arr[i]+'</a></li>';            }            oUl.innerHTML=html;        }    </script>    <script type="text/javascript">        var oUl=document.querySelector('ul');        var oHtml=document.getElementsByTagName('html')[0];        var oText=document.getElementById('text');        oText.onkeyup=function(){            if (this.value!='') {                var oS=document.createElement('script');                oS.src='http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';                oHtml.appendChild(oS);                oUl.style.display='block';            }        }    </script></html>
阅读全文
0 0