百度搜索关键字提示、跳转

模拟的百度搜索的搜索栏，输入数据时会在百度库里提取关键词数组，加入到输入框下面的列表中，可以回车跳转，点击跳转

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>百度搜索</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 400px;
                margin: 200px auto;
            }
            #text{
                display: block;
                width: 400px;
                height: 40px;
            }
            #list{
                display: none;
                width: 402px;
                border: 1px solid #ccc;
            }
            #list li{
                list-style: none;
                width: 100%;
                height: 25px;
                line-height: 25px;
                font-family: "微软雅黑";
                font-size: 14px;
            }
            #list li a{
                display: block;
                width: 100%;
                height: 25px;
                line-height: 25px;
                text-decoration: none;
                color: #000;
            }
            #list li a.active{
                background: #9cf;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <input type="text" id="text" />
            <ul id="list">
            </ul>
        </div>
        <script type="text/javascript">
            var oText = document.getElementById("text");
            var oList = document.getElementById("list");
            var oLi = document.getElementsByTagName('li');
            var oA = document.getElementsByTagName('a');
            var n = -1;
            for( var i = 0;i<oA.length;i++ )
            {
                oA[i].index = i;
                oA[i].onmouseover = function(){
                    for( var j = 0 ;j<oA.length;j++ )
                    {
                        oA[j].className = '';
                    }
                    oA[this.index].className = 'active';
                }
            }
            oText.onfocus = function(){
                oText.onkeyup = function(ev){
                    ev = ev || event;
                    if( ev.keyCode == '38' )                //向上键
                    {
                        for( var j = 0 ;j<oA.length;j++ )
                        {
                            oA[j].className = '';
                        }
                        n--;
                        if( n == -1 )
                        {
                            n = oA.length-1;
                        }
                        oText.value = oA[n].innerHTML;
                        oA[n].className = 'active';
                    }else if( ev.keyCode == '40' )            //向下键
                    {
                        for( var j = 0 ;j<oA.length;j++ )
                        {
                            oA[j].className = '';
                        }
                        n++;
                        if( n == oA.length )
                        {
                            n = 0;
                        }
                        oText.value = oA[n].innerHTML;
                        oA[n].className = 'active';
                    }else if( ev.keyCode == '13' ){ 
                        open( 'https://www.baidu.com/s?wd='+oText.value , '_self' );    //打开搜索关键字的网页
                    }else{
                        var val = oText.value;
                        oList.style.display = 'block';
                        var oScirpt = document.createElement('script');
                        //cb为回调函数callback
                        oScirpt.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+val+'&cb=search';
                        document.body.appendChild( oScirpt );
                        document.body.removeChild(oScirpt);    //删除后通过回调函数调用search方法
                    }
                }
            }
            //向形成的列表中添加内容
            function search( data ){
                var str = '';
                for( var i = 0;i<data.s.length;i++ )
                {
                    str += '<li><a href="https://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
                }
                oList.innerHTML = str;
            }
        </script>
    </body>
</html>

 

posted @ 2016-09-02 11:59  凌晨肆丶的洛杉矶  阅读(550)  评论(0)  编辑  收藏  举报