本文實例講述了jsonp實現百度下拉框功能的方法。分享給大家供大家參考,具體如下:
思路就是獲取用戶輸入,然后根據用戶輸入調用百度的一個接口jsonp實現跨域請求,然后將百度返回給的內容渲染數據到視圖。需要注意的就是,發送請求的時候記得編碼用戶輸入的內容
var obj=document.querySelector('#user-input');var body=document.querySelectorAll('body')[0];var ul=document.querySelector('#ul');var inner='';function render(data){    //刪除前一次請求的li的內容    if(ul.innerHTML!=''){      ul.innerHTML='';    }    for(let i = 0, length1 = data.s.length; i < length1; i++){      var li=document.createElement('li');      li.innerHTML=data.s[i];      ul.appendChild(li);    }}obj.addEventListener('keyup',function(){    if(document.querySelector('#request')){      body.removeChild(document.querySelector('#request'));    }      var script=document.createElement('script');      script.id="request";      script.src="http://unionsug.baidu.com/su?wd="+encodeURI(obj.value.trim())+'&p=3&cb=render';      body.appendChild(script);});//利用冒泡添加事件。ul.addEventListener('click',function(e){    var e=e||window.event;    window.location.href="https://www.baidu.com/s?word=" rel="external nofollow" +encodeURI(e.target.innerHTML);});<style type="text/css">  *{          margin: 0;          padding: 0;  }  ul{          margin-left: 10px;          transition: all 1s ease;  }    input{          width: 300px;          height: 40px;          line-height: 40px;          background: #4caf50a6;          outline: none;          border: none;          border-radius: 10px;          padding-left: 15px;          color: white;          font-size: 20px;    }    li{          cursor: pointer;          transition: all 1s ease;          list-style: none;          width: 280px;          height: 30px;          line-height: 30px;          background: #8acb8da8;          color: #888e4a;          padding-left: 10px;    }    li:hover{          background: #64a968;          color: #caf1cc;    }    input::-webkit-input-placeholder{      color:white;    }    input::-moz-placeholder{  /* Mozilla Firefox 19+ */      color:white;    }    input:-moz-placeholder{  /* Mozilla Firefox 4 to 18 */      color:white;    }    input:-ms-input-placeholder{ /* Internet Explorer 10-11 */       color:white;    }</style>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答