jsonp跨域&百度下拉

最新推荐文章于 2023-04-07 17:32:16 发布

辛苦的码农20200609

最新推荐文章于 2023-04-07 17:32:16 发布

阅读量66

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj21k0jihkib.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         #wrap {
 13             width: 400px;
 14             margin: 50px auto;
 15         }
 16 
 17         #wrap input {
 18             width: 380px;
 19             height: 38px;
 20             border: #000 1px solid;
 21             padding: 0 9px;
 22         }
 23 
 24         #wrap ul {
 25             border: #000 1px solid;
 26             width: 398px;
 27             height: auto;
 28             padding: 0;
 29             overflow: hidden;
 30         }
 31 
 32         #wrap ul li {
 33             list-style: none;
 34             width: 380px;
 35             padding: 0 9px;
 36             height: 30px;
 37             border-bottom: #999 1px solid;
 38             line-height: 30px;
 39         }
 40 
 41         #wrap ul li.on {
 42             background: #c00;
 43             color: #fff;
 44         }
 45     </style>
 46     <script>
 47         function jsonP(json) {
 48             if (!json.url) {
 49                 alert('请输入正确的请求路径');
 50                 return;
 51             }
 52             json.data = json.data || {};
 53             json.cbName = json.cbName || 'cb';
 54             var fnName = 'show' + Math.random();
 55             fnName = fnName.replace('.', '');
 56             window[fnName] = function (json2) {
 57                 json.success && json.success(json2);
 58                 oHead.removeChild(oScript);
 59             };
 60             json.data[json.cbName] = fnName;
 61             var arr = [];
 62             for (var name in json.data) {
 63                 arr.push(name + '=' + json.data[name]);
 64             }
 65             var oScript = document.createElement('script');
 66             oScript.src = json.url + '?' + arr.join('&');
 67             var oHead = document.getElementsByTagName('head')[0];
 68             oHead.appendChild(oScript);
 69         }
 70         window.onload = function () {
 71             var oTxt = document.getElementById('txt');
 72             var oBox = document.getElementById('box');
 73             var iNow = -1;
 74             var oldValue;
 75             oTxt.onkeyup = function (ev) {
 76                 var oEvent = ev || event;
 77                 if(oEvent.keyCode != 40 && oEvent.keyCode != 38 && oEvent.keyCode != 13){
 78                     jsonP({
 79                         url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
 80                         data: {
 81                             wd: oTxt.value
 82                         },
 83                         success: function (json) {
 84                             var arr = json.s;
 85                             for (var i = 0; i < arr.length; i++) {
 86                                 var oLi = document.createElement('li');
 87                                 oLi.innerHTML = arr[i];
 88                                 oBox.appendChild(oLi);
 89                             }
 90                             var aLi = oBox.children;
 91                             for (var i = 0; i < aLi.length; i++) {
 92                                 aLi[i].index = i;
 93                                 aLi[i].onmouseover = function () {
 94                                     iNow = this.index;
 95                                     for (var i = 0; i < aLi.length; i++) {
 96                                         aLi[i].className = '';
 97                                     }
 98                                     this.className = 'on';
 99                                     oTxt.value = this.innerHTML;
100                                 };
101                             }
102                         }
103                     });
104                     oldValue = oTxt.value;
105                 }
106             };
107 
108             oTxt.onkeydown = function (ev) {
109                 var oEvent = ev || event;
110                 var aLi = oBox.children;
111                 if(oEvent.keyCode == 40){
112                     iNow++;
113                     if(iNow == aLi.length){
114                         iNow = -1;
115                     }
116 
117                     for(var i = 0; i < aLi.length; i++){
118                         aLi[i].className = '';
119                     }
120                     if(iNow == -1){
121                         oTxt.value = oldValue;
122                     }else{
123                         aLi[iNow].className = 'on';
124                         oTxt.value = aLi[iNow].innerHTML;
125                     }
126                 }
127                 if(oEvent.keyCode == 38){
128                     iNow--;
129                     if(iNow == -2)iNow = aLi.length - 1;
130                     for(var i = 0; i < aLi.length; i++){
131                         aLi[i].className = '';
132                     }
133                     if(iNow == -1){
134                         oTxt.value = oldValue;
135                     }else{
136                         aLi[iNow].className = 'on';
137                         oTxt.value = aLi[iNow].innerHTML;
138                     }
139                     return false;
140                 }
141                 if(oEvent.keyCode == 13){
142                     window.open('https://www.baidu.com/s?wd=' + oTxt.value);
143                 }
144             }
145         }
146     </script>
147 </head>
148 <body>
149 <div id="wrap">
150     <input type="text" id="txt">
151     <ul id="box">
152 
153     </ul>
154 </div>
155 </body>
156 </html>

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域&百度下拉

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 ...
复制链接

扫一扫