<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
