码迷,mamicode.com
首页 > Web开发 > 详细

百度搜索--jquery

时间:2016-11-19 02:32:42      阅读:432      评论:0      收藏:0      [点我收藏+]

标签:搜索   idt   input   turn   code   utf-8   txt   pac   error:   

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

 

百度搜索--jquery

标签:搜索   idt   input   turn   code   utf-8   txt   pac   error:   

原文地址:http://www.cnblogs.com/jasonwang2y60/p/6079562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!