实现搜索框-跨域jsonp

最新推荐文章于 2021-11-27 12:15:39 发布

sam80000

最新推荐文章于 2021-11-27 12:15:39 发布

阅读量73

点赞数

分类专栏：前端知识点文章标签： javascript

本文链接：https://blog.csdn.net/sam80000/article/details/120113126

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

需求

实现搜索框

实现思路

1.编写好布局 2.实现输入框事件，有数据的话，通过添加script标签 src属性调用数据 3.编写回调函数，对获取的数据进行处理。

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #div1{
            width: 312px; margin: 100px auto;
        }
        #sea{
            width: 300px; height: 30px; padding: 5px; border: 1px solid black; font-size: 16px
        }
        #ul1{
            width: 310px;border: 1px solid black;margin: 0px;display: none;
        }
    </style>
    <script type="text/javascript">
        function download(data){
            var arr=data.s;
            var oUl=document.getElementById("ul1");
            //将上次输入的结果清空
            oUl.innerHTML='';
            //显示无序列表
            oUl.style.display="block";
            //添加数据
            for(var i=0;i<arr.length;i++){
                //创建新标签
                var newLi=document.createElement("li");
                var oa=document.createElement("a");
                //添加数据
                oa.innerHTML=arr[i];
                oa.href='http://www.baidu.com/s?wd=' + arr[i];  //对应的搜索网址
                oa.target='_blank'; //在新窗口打开网页
                //插入ul中
                newLi.appendChild(oa);
                oUl.appendChild(newLi);

            }
        }
    </script>
    <script type="text/javascript">
        window.onload=function(){
            var oIn=document.getElementById("sea");
            var oUl=document.getElementById("ul1");

            oIn.onkeyup=function(){
                var ovalue=this.value; //获取输入框的值
                
                //对输入框进行非空判断
                if(!ovalue){
                    //空值不改变状态
                    oUl.style.display="none";
                }else{
                    //非空加载数据
                    //创建script
                    var oscript=document.createElement("script");
                    //填写src访问路径，设置访问值和调用方法
                    oscript.src=`http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;
                    //将script标签插入body
                    document.body.appendChild(oscript);
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1" >
        <input type="text" id="sea"/>
        <ul id="ul1">
            
        </ul>
    </div>
</body>
</html>

sam80000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现搜索框-跨域jsonp

需求实现搜索框实现思路1.编写好布局 2.实现输入框事件，有数据的话，通过添加script标签 src属性调用数据 3.编写回调函数，对获取的数据进行处理。代码<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫