jsonp跨域写淘宝搜索联想词（原生js）
Posted zhuzixi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp跨域写淘宝搜索联想词（原生js）相关的知识，希望对你有一定的参考价值。
一、主体
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0px; 12 margin: 0px; 13 list-style: none; 14 text-decoration-line: none; 15 } 16 17 input { 18 position: relative; 19 top: 200px; 20 left: 200px; 21 width: 400px; 22 height: 28px; 23 border: 2px solid #f40; 24 border-top-left-radius: 28px; 25 border-bottom-left-radius: 28px; 26 text-indent: 1em; 27 outline: none; 28 } 29 30 .search { 31 position: absolute; 32 top: 200px; 33 left: 604px; 34 width: 80px; 35 height: 28px; 36 line-height: 28px; 37 text-align: center; 38 border: 2px solid #f40; 39 color: #fff; 40 background-color: #f40; 41 cursor: pointer; 42 } 43 44 .box { 45 position: absolute; 46 top: 232px; 47 left: 200px; 48 width: 400px; 49 50 border: 2px solid #ccc; 51 background: #fff; 52 display: none; 53 } 54 55 li { 56 cursor: pointer; 57 } 58 59 li:hover { 60 background-color: #ccc; 61 } 62 63 .box li a { 64 display: block; 65 66 width: 100%; 67 height: 100%; 68 color: black; 69 font-size: 14px; 70 padding-left: 1em; 71 margin-top: 3px; 72 } 73 74 .search a { 75 display: block; 76 width: 100%; 77 height: 100%; 78 font-size: 16px; 79 color: #fff; 80 } 81 </style> 82 </head> 83 84 <body> 85 <input type="text" style="color:#666" value="女士化妆品" placeholder="请输入要搜索的商品"> 86 <div class="search"> 87 <a href="#">搜 索</a> 88 </div> 89 <div class="box"></div> 90 <script> 91 var oInput = document.getElementsByTagName(‘input‘)[0]; 92 var search = document.getElementsByTagName(‘div‘)[0]; 93 var box = document.getElementsByTagName(‘div‘)[1]; 94 var A = document.querySelector(‘.search a‘); 95 var selfA = A, 96 selfInput = oInput, 97 selfBox = box; 98 //跨域1——监听input框内值的变化，通过跨域函数及时获取服务器资源 99 selfInput.oninput = crossDomain; 100 //跨域函数 101 function crossDomain(){ 102 var oScript = document.createElement(‘script‘); 103 oScript.src = ‘https://suggest.taobao.com/sug?code=utf-8&q=‘ + this.value + ‘&callback=jsonp1‘; 104 document.body.appendChild(oScript); 105 document.body.removeChild(oScript); 106 } 107 108 function jsonp1(data) { 109 var s = ‘‘; 110 var str = data.result; 111 if (str.length > 0) { 112 //要用加载的资源长度来判断，而不能用box框的innerHTML或innerText 113 //因为，box的结构和内容要比实时资源慢一点。 114 str.forEach(function (ele, index) { 115 s = s + ‘<li><a href = https://s.taobao.com/search?initiative_id=tbindexz_20170306&q=‘ + 116 ele[0] + ‘>‘ + ele[0] + ‘</a></li>‘; 117 }); 118 selfBox.innerHTML = s; 119 selfBox.style.display = ‘block‘; 120 } else { 121 selfBox.style.display = ‘none‘; 122 } 123 selfBox.onclick = function (e) { 124 //此处的跨域也是通过路径2，也是a标签跨域。 125 selfInput.value = e.target.innerText; 126 } 127 //方法1，加定时器延迟时间 128 selfInput.onblur = function () { 129 //这个地方解决的问题是：只要input框值是空，当鼠标离焦的时候，就把值变为‘女士化妆品‘ 130 //并且此时聚焦又可以出发新的onfocus，但是显得多此一举，用户体验不好，因为一直出现‘女士化妆品‘，有点流氓， 131 //不过默认值可以随机变的话，就画龙点睛了。 132 // if (this.value == ‘‘) { 133 // this.value = ‘女士化妆品‘; 134 // selfInput.onfocus = crossDomain; 135 // } 136 setTimeout(function () { 137 selfBox.style.display = ‘none‘; 138 }, 100) 139 } 140 //方法2，a标签和click事件都需要鼠标点下+抬起，没有blur事件快 141 //但是mousedown事件比blur事件快，但是无法触发a标签。 142 // selfInput.onblur = function(){ 143 // selfBox.style.display = ‘none‘; 144 // } 145 selfInput.onfocus = function () { 146 if (str.length > 0) { 147 selfBox.style.display = ‘block‘; 148 } 149 } 150 } 151 //跨域2——input框的默认值是“女士化妆品”，此时鼠标聚焦也需要跨域，因为此时input框内的值没有发生变化； 152 //需要注意的是，一旦触发了跨域1，里面新的onfocus会替换该onfocus，至此，该onfocus就不会再触发。 153 selfInput.onfocus = crossDomain; 154 //点击a标签搜索商品，也跨域，不过是通过跨域路径2，超链接的路径。 155 selfA.onclick = function (e) { 156 this.href = ‘https://s.taobao.com/search?initiative_id=tbindexz_20170306&q=‘ + oInput.value; 157 } 158 </script> 159 </body> 160 161 </html>
二、问题
1.input标签内，不是style内置属性，不能用style获取，比如input.value、input.placeholder
2.selfBox框内的内容要比实时的input框值，以及获取的资源值，慢一点点。所以用资源值的长度来监听更加准确，从而才能及时消除box框
3.两个不同路径的跨域，一个input框内值的变化及时跨域获取资源，二是a标签跨域到新的页面，需要获取新的页面的URL。
该项目中两种不同的路径跨域都有两处使用，分别是input值的变化——路径1，当input默认值是“化妆品”，不要变化的时候，onfocus聚焦需要跨域——路径1；
当box中的每个li下的a标签直接链接到各自的页面时，需要跨域得到各自的页面URL——路径2 ；当点击“搜索”时，需要a标签获取input框内的值，拼接成新的url
超链接到新的页面需要跨域——路径2
4.定位时，position、top、left，同级块元素跟文档之间的定位是以border为标准。
5.画半圆的方法需要熟悉。
6.jsonp跨域：创建script标签——script.src获取资源——将script标签插入到body中——将script标签从body中删除——回调函数的使用
7.跨域的方式：（1）flash（2）服务器代理中转（3）document.domain：将基础域名相同的设置在需要相互访问的页面的脚本中（4）jsonp跨域。
以上是关于jsonp跨域写淘宝搜索联想词（原生js）的主要内容，如果未能解决你的问题，请参考以下文章