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

最新推荐文章于 2024-08-18 00:09:16 发布

石界星空

最新推荐文章于 2024-08-18 00:09:16 发布

阅读量275

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/stone10086/article/details/72553253

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
跨域加载：搜索输入关键字实时更新

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ padding: 50px; } *{
复制链接

扫一扫

专栏目录