zoukankan html css js c++ java

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

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

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

查看全文

相关阅读:
改变Chrome浏览器主程序_缓存_个人信息路径
 谷歌不支持 activeX插件
 计算机基础，Python基础--变量以及简单的循环
 Python之格式化输出，初始编码以及运算符
 Python基础数据类型之列表和元组
 Python基础数据类型之int、bool、str
Python基础数据类型之字典
 Python基础数据类型之集合以及其他和深浅copy
Python之编码
 Python之函数基础

原文地址：https://www.cnblogs.com/lijiahui199494/p/5832973.html