本文實例講述了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. 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相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
