<!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>
<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>