前端之家收集整理的这篇文章主要介绍了
jsonp百度下拉实例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html> <head> <title>jsonp
百度下拉
菜单</title> <
Meta charset="utf-8"> <script type="text/javascript"> function success(json){ var oText = document.getElementById('selech'); var oUl = document.getElementById('ul'); if(json.s.length>0){ oUl.style.display="block"; }else{ oUl.style.display="none"; } oUl.innerHTML = ''; for(var i=0;i<json.s.length;i++){ var oLi = document.createElement('li'); oLi.innerHTML = json.s[i]; oUl.appendChild(oLi); } } function addEvent(obj,event,fn){ if(obj.attachEvent){ obj.attachEvent('on'+event,fn); } else{ obj.addEventListener(event,fn,false); } };//事件绑定兼容 window.onload = function(){ var oText = document.getElementById('selech'); var os = null; var now=-1; var olist=null; var oValue=null; addEvent(oText,'keyup',function(ev){ var oEvent = ev||window.event; olist = document.getElementsByTagName('li'); if(oEvent.keyCode==38||oEvent.keyCode==40) return; oValue = oText.value; url = "http://suggestion.baidu.com/su?wd="+oValue+"&cb=success"; if(os){ document.body.removeChild(os); } os = document.createElement('script'); os.src=url; document.body.appendChild(os); now=-1; }) addEvent(oText,'keydown',function(ev){ var oEvent = ev||window.event; if(oEvent.keyCode==38){ now--; if(now==-1){ oText.value=oValue; olist[0].style.backgroundColor="#fff"; }else if(now<=-2){ now=-1; } else{ getKey(); } }else if(oEvent.keyCode==40){ now++; if(now==olist.length){ now=-1; oText.value=oValue; olist[olist.length-1].style.backgroundColor="#fff"; return false; }else{ getKey(); } } },false) function getKey(){ for(var i=0;i<olist.length;i++){ olist[i].style.backgroundColor="#fff"; } oText.value=olist[now].innerHTML; olist[now].style.backgroundColor="red"; } } </script> <style type="text/css"> .content{width:300px;margin:50px auto;} *{margin:0;padding:0;} input{width:220px;padding:4px;border:solid 1px #ccc;background:white;height:22px;line-height:22px;} #ul{list-style:none;width:228px;border:solid 1px #ccc;margin-top:-1px;overflow:hidden;display:none;} #ul li{font-size:12px;padding:6px 8px;} #ul li:hover{background:#ccc;} </style> </head> <body> <div class="content"> <input type="text" id="selech"/> <ul id="ul"></ul> </div> </body> </html>
