script跨域之360搜索

思考：

布局：

1，flex元素上下左右居中，内部元素横向排列；

div{
             /* 100vh = viewport height*/
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }

2，input输入框与input type=“button”按钮对齐，给属性值vertical-align:top;

3,input输入框去除默认样式 {border:none;outline:none;}

js原理解析，理解注释

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>模拟360搜索</title>
  6     <style>
  7 body{padding:0;margin:0;overflow:hidden;}
  8         ul,li{margin:0;padding:0;}
  9         ul{border:1px solid #ccc;border-top:0;width:522px;margin-left:-110px;}
 10         li{list-style:none;padding:5px;text-align:left;text-indent:10px;cursor:pointer;}
 11         .main{
 12              /* 100vh = viewport height*/
 13             display: flex;
 14             justify-content: center;
 15             align-items: center;
 16             flex-direction: row;
 17         }
 18         .skin-search-input{
 19             width:500px;
 20             background: #fff;
 21             height: 34px;
 22             padding: 4px 10px 4px 12px;
 23             vertical-align: top;
 24             border: 1px solid #ccc;
 25         }
 26         .keyword{
 27             background: #fff;
 28             border: none;
 29             color: #333;
 30             font-size: 16px;
 31             height: 30px;
 32             line-height: 30px9;
 33             margin-top: 3px;
 34             outline: none;
 35             width:100%;
 36         }
 37         input[type=button]{
 38                                -webkit-appearance: none;
 39                                border: 0;
 40                                cursor: pointer;
 41                                font-size: 18px;
 42                                height: 44px;
 43                                outline: none;
 44                                vertical-align: top;
 45                                width: 110px;
 46                                background: #19b955;
 47                                color: #fff;
 48                            }
 49     </style>
 50     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 51 </head>
 52 <body>
 53 
 54     <div class="main">
 55         <div class="skin-search-input">
 56             <input type="text" class="keyword">
 57         </div>
 58         <input type="button" value="搜一下">
 59     </div>
 60     <div align="center" class="message" style="display:none;">
 61         <ul>
 62         </ul>
 63     </div>
 64 
 65 <script>
 66     //如果页面加载直接给li元素绑定事件，你是获取不到li元素的。
 67     //解决方案，可以用jq给我们提供的事件委托
 68     $(".message>ul").on("mouseover","li",function () {
 69         this.style.background = "#efefef";
 70     });
 71     $(".message>ul").on("mouseout","li",function () {
 72         this.style.background = "white";
 73     });
 74 
 75     function getInfo(data) {//回调函数
 76 //解析数据，然后把message里面的ul里面的li元素的数据替换
 77         var results = data.result;
 78         var i;
 79         document.querySelector(".message>ul").innerHTML = "";
 80         for(i=0;i<results.length;i++){
 81             var li = document.createElement("li");
 82             li.innerHTML = results[i].word;
 83             console.log(li);
 84             document.querySelector(".message>ul").appendChild(li);
 85         }
 86     }
 87 
 88     //添加键盘事件
 89     document.querySelector(".keyword").onkeyup = function () {
 90         var keyword = this.value;
 91 
 92         //如果在输入的时候有空格的话，这里需要做判断
 93         if(keyword.length>0){
 94             //我根据这个关键字去获取数据，获取到数据之后
 95             //加载到列表里
 96             //显示
 97             document.querySelector(".message").style.display = "block";
 98             //把关键字给360的这个搜索接口，让它来给我结果
 99 
100             //使用script标签去发送请求
101             var tag = document.createElement("script");
102             tag.src = "https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word="+keyword;
103             document.body.appendChild(tag);
104         }else{
105             document.querySelector(".message").style.display = "none";
106         }
107     }
108 </script>
109 </body>
110 </html>

View Code