类似百度搜索框时时查询

1、CSS：

    .active{

background-color: #eff2f5; 
cursor: pointer; 

    }

    input.search-input{

        width: 331px;

        height: 38px;

        margin-bottom: 0;

        border: 1px solid #dcdcdd;

        font-size: 16px;

        padding: 0 6px;

        -webkit-box-shadow: none;

        -moz-box-shadow: none;

        box-shadow: none;

        transition:none;

        -webkit-transition: none;

        -moz-transition: none;

    }

    input.search-input:focus,input.search-input:active,input.search-input:hover{

        border-color: #2486c9;

        -webkit-box-shadow: none;

        -moz-box-shadow: none;

        box-shadow: none;

        transition:none;

        -webkit-transition: none;

        -moz-transition: none;

        outline: none;

    }

button.btn-search{

        display: inline-block;

        height: 40px;

        width: 54px;

        padding: 4px 12px;

        margin-bottom: 0;

        font-size: 14px;

        line-height: 20px;

        text-align: center;

        vertical-align: middle;

        cursor: pointer;

        color: #fff;

        background-color: #2486c9;

        background-image:url(<?php echo $base_path.'search/btn_search.png';?>);

        background-position: center center;

        background-repeat: no-repeat;

        border-top-right-radius: 4px;

        border-bottom-right-radius: 4px;

        border-top-left-radius: 0;

        border-bottom-left-radius: 0;

        -webkit-border-top-right-radius: 4px;

        -webkit-border-bottom-right-radius: 4px;

        -webkit-border-top-left-radius: 0;

        -webkit-border-bottom-left-radius: 0;

        -moz-border-top-right-radius: 4px;

        -moz-border-bottom-right-radius: 4px;

        -moz-border-top-left-radius: 0;

        -moz-border-bottom-left-radius: 0;

        border: 1px solid #2486c9;

    }

#a-tip-wrapper{

        position: absolute;

        z-index:100;

        top:40px;

        width:290px;

        left: 0;

        background-color: #fff;

        display: none;

        border:1px solid rgba(200, 201, 195, 0.60);

        border-bottom-left-radius: 4px;

        border-bottom-right-radius: 4px;

        -webkit-border-bottom-left-radius: 4px;

        -webkit-border-bottom-right-radius: 4px;

        -moz-border-bottom-left-radius: 4px;

        -moz-border-bottom-right-radius: 4px;

    }

    #a-tip-wrapper li{

        padding: 2px 10px 2px 10px;

    }

2、HTML：

     <form id="requirement-search-form" style="position: relative;display: inline-block" action="form表单提交地址">

                <input id="kw_input" name="kw" type="text" class="search-input" value="" placeholder="搜索需求" maxlength="100" autocomplete="off"/>  //搜索input框

                <div style="position: absolute; top:0;right: 0;">

                    <button type="submit" class="btn-search" ></button>  //搜索按钮

                </div>

      </form>

      <div id="a-tip-wrapper">  //搜索提示框，从后台获取数据后将动态加载

           <ul>

           </ul>

       </div>

3、JS代码：

 $('#kw_input').focus(function(event){

            getTipsByKeyword($('#kw_input').val());

        }).keyup(function(event){

            if(event.keyCode===40){   //event.keyCode：获取按键编码值，可用于限制某些特殊字符

                if($('#a-tip-wrapper').css('display')!='none'){

                    var $active_li = $('#a-tip-wrapper li.active');

                    if($active_li.length>0){

                        if(!$('#a-tip-wrapper li').last().hasClass('active')){//非最后一个

                            $('#a-tip-wrapper li').removeClass('active');

                            $active_li.next().addClass('active');

                        }

                    }else{

                        $('#a-tip-wrapper li').removeClass('active');

                        $('#a-tip-wrapper li:eq(0)').addClass('active');

                    }

                    $('#kw_input').val($('#a-tip-wrapper li.active>span').html());

                    return;

                }

            }else{ 

                        $('#a-tip-wrapper li').removeClass('active');

                        $('#a-tip-wrapper li').last().addClass('active');

                    }

                    $('#kw_input').val($('#a-tip-wrapper li.active>span').html());

                    return;

                }

            }

            getTipsByKeyword($('#kw_input').val());

        }).click(function(event){

            event.stopPropagation();

        });

//------------搜索提示框--------------

    //存储上一次搜索过的关键字数据，如果连续两次搜索相同的关键字时，可以只是执行一次ajax请求

    window.PopUpData = window.PopUpData||{};  

     //根据关键字，获取搜索结果

    function getTipsByKeyword(kw){   //kw：关键字（keyword）

        if(window.PopUpData[kw]&&window.PopUpData[kw].hasRequest){  //当

            showTip(window.PopUpData[kw].data);

            return;

        }

        $.ajax({

            url:'根据关键字，获取后台数据的链接地址',

            data:{keyword:kw},

            dataType: "json",

            success:function(data){

                if(data.success){

                    window.PopUpData[kw] = {hasRequest:true,data:data.data};

                    showTip(data.data);

                }

            },

            error:function(){

            }

        });

    }

    //动态添加搜索结果

    function showTip(array){

        if(!array || !array.length||array.length == 0){

            $('#a-tip-wrapper').hide();

            return;

        }

        var html=[];

        for(var i=0;i<array.length;i++){

            html.push('<li><span>'+array[i]+'</span></li>');

        }

        $('#a-tip-wrapper>ul').html(html); 

        tip_bind_event();

        $('#a-tip-wrapper').show();

    }    

     //设置数据结果的click事件和hover事件

    function tip_bind_event(){

        $('#a-tip-wrapper li').click(function(){

            $('#kw_input').val($(this).children('span').html());

            $('#a-tip-wrapper').hide();

            $('#requirement-search-form').submit();

        }).hover(function(){

            $('#a-tip-wrapper li').removeClass('active');

            $(this).addClass('active');

        });

    }

4、注释：

    （1）keyup事件：

完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

    （2）event.keyCode：获取按键编码值，可用于限制某些特殊字符

    （3）event.stopPropagation()：不再派发事件

   注：（1）cancelBubble()用于IE的阻止冒泡事件，event.stopPropagation()用于firefox和chrome等其他浏览器

（2） 冒泡：页面中有个botton，你触发了botton的click事件 事件会冒泡到父容器 比如body也会发生click事件

但是如果你在button的click中 加了这句话 事件就不会向父容器冒泡