百度搜索--jquery

最新推荐文章于 2024-05-23 23:33:04 发布

z-pan

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量64

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/jasonwang2y60/p/6079562.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:645px; margin:10px auto; text-align:center; overflow:hidden; font-size:20px;}
#box img{ width:270px; height:129px;}
#t1{ width:540px; height:36px; line-height:36px; outline:none; text-indent:6px; font-size:20px;}
.s_btn {
    outline:none;
    width: 100px;
    height: 40px;
    float:right;
    color: rgb(255, 255, 255);
    font-size: 15px;
    letter-spacing: 1px;
    background: rgb(51, 133, 255);
    border-bottom: 1px solid rgb(45, 120, 244);
    -webkit-appearance: none;
    border:none;
    -webkit-border-radius: 0;
    margin-left:1px;
    cursor:pointer;
}
#box ul{ width:542px; border:1px solid #ccc; border-top:none; text-align:left; text-indent:6px; display:none;}
#box ul li{ height:30px; line-height:30px; cursor:default;}
#box ul li.on{ background:#f0f0f0;}
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
    var oBox=$('#box');
    var oBtn=$('#btn1');
    var oTxt=$('#t1');
    var oUl=$('#ul1');
    var iNow=-1;
    var oldValue='';
    var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';
    oTxt.on('keyup',function(ev){
        if(ev.keyCode==38||ev.keyCode==40){
            return;
        }
        if(ev.keyCode==13){
            window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self');
            oTxt.val('');
        }
        $.ajax({
            url:url,
            data:{
                wd:oTxt.val()
            },
            dataType:'jsonp',
            jsonp:'cb',
            timeout:5000,
            success:function(json){
                var arr=json.s;
                if(arr.length){
                    oUl.css('display','block');
                }else{
                    oUl.css('display','none');
                }
                oUl.html('');
                $.each(arr,function(index){
                   var oLi=document.createElement('li');
                   $(oLi).html(arr[index]);
                   $(oLi).appendTo(oUl);
                    $(oLi).on('mouseover',function(){
                        $.each(oUl.children(),function(t){
                            oUl.children().eq(t).removeClass('on');
                        });
                        $(this).addClass('on');
                    });
                    $(oLi).on('mouseout',function(){
                        $.each(oUl.children(),function(t){
                            oUl.children().eq(t).removeClass('on');
                        });
                    });
                    $(oLi).on('click',function(){
                        window.open('https://www.baidu.com/s?wd='+$(this).html(),'_self');
                        oTxt.val('');
                    });
                });
            },
            error:function(){
                alert('网络异常，请重新输入');
            }
        });
        oldValue=oTxt.val();
    });
    oBtn.on('click',function(){
        window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self');
        oTxt.val('');
    });
    oTxt.on('keydown',function(ev){
        var aLi=$('li');
        switch(ev.keyCode){
            case 40:
                iNow++;
                if(iNow==aLi.length){iNow=-1};
                $.each(aLi,function(index){
                    aLi.eq(index).removeClass('on');
                });
                if(iNow==-1){
                    oTxt.val(oldValue);
                }else{
                    aLi.eq(iNow).addClass('on');
                    oTxt.val(aLi.eq(iNow).html());
                }
            break;
            case 38:
                iNow--;
                if(iNow==-2){iNow=aLi.length-1};
                $.each(aLi,function(index){
                    aLi.eq(index).removeClass('on');
                });
                if(iNow==-1){
                    oTxt.val(oldValue);
                }else{
                    aLi.eq(iNow).addClass('on');
                    oTxt.val(aLi.eq(iNow).html());
                }
                break;
          }
    });
});
</script>
</head>

<body>
<div id="box">
    <img src="https://www.baidu.com/img/bd_logo1.png"><br>
    <input type="text" id="t1"><input type="submit" id="btn1" value="百度一下" class="bg s_btn">
    <ul id="ul1">
        <!--<li class="on">1111</li>-->
        <!--<li>1111</li>-->
        <!--<li>1111</li>-->
        <!--<li>1111</li>-->
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/jasonwang2y60/p/6079562.html

z-pan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度搜索--jquery

<!doctype html><html><head><meta charset="utf-8"><title></title><style>*{ margin:0; padding:0; list-style:none;}#box{ width:645px; margin...
复制链接

扫一扫