一、主体
?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或innerText113 //因为，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）
原文地址：https://www.cnblogs.com/zhuzixi/p/9109365.html