jsonp百度下拉实例

最新推荐文章于 2024-04-02 09:35:04 发布

侠客行

最新推荐文章于 2024-04-02 09:35:04 发布

阅读量694

点赞数

分类专栏： web 前端开发

本文链接：https://blog.csdn.net/aspwzmuma/article/details/8853936

版权

web 前端开发专栏收录该内容

71 篇文章 0 订阅

订阅专栏

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