淘宝搜索框

跨域的解决方法之一 JSONP的用法

<style>
        li{
            list-style: none;
            width:100%;
           text-indent: 10px;
           height: 40px;
            line-height: 40px;
        }
        a{
            text-decoration: none;
            color: black;
            display: block;
            width: 100%;
        }
        li:hover{
            background-color: #cecece;
            cursor: pointer;
        }
        input[type='text']{
            width: 500px;
            height: 30px;
            border: 2px solid orangered;
            outline: none;
        }
        input[type='button']{
            width: 80px;
            height: 36px;
            padding: 0;
            border: none;
            vertical-align: top;
            background-color: orangered;
            color: #fff;
            cursor: pointer;
        }
        ul{
            margin-top: 5px;
            border: 1px solid #cecece;
            width: 500px;
            padding: 0;
            margin-left: 30px;
            overflow: hidden;
        }
    </style>
`

```html
``淘宝<input type="text" /><input type="button" value="搜索">
    <ul>
       
    </ul>
``
手动截取淘宝的API
```javascript
`<script>
      let oInput = document.querySelector("input");
      let oUl = document.querySelector("ul");
      oUl.innerHTML = "";
      oUl.style.display='none';
      oInput.oninput = function () {
      
        let oScript = document.createElement("script");

        oScript.src = `https://suggest.taobao.com/sug?code=utf-8&q=${oInput.value}&callback=foo`;
        
        document.body.appendChild(oScript);
        document.body.removeChild(oScript);
      };
      function foo(res) {
        let data = res.result;
        let str = "";
        if (data) {
          data.forEach((item) => {
            str += `<li> <a href="https://uland.taobao.com/sem/tbsearch?keyword=${item[0]}">${item[0]}</a></li>`;
          });
          if(str==''){
          oUl.style.display="none";}
          else{
          oUl.style.display="block";}
          oUl.innerHTML = str;
        }
      }
    </script>