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

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