jquery input框时间监听事件，仿百度搜索，简单实现功能。

<input id="shouqian_huiyuan" type="text" placeholder="请输入您的会员号"  list="city">

<!--这里用到一个H5的标签datalist，复制代码后先去百度下这个标签的作用，方便看懂下列代码-->
<datalist id="city">  
                                     
</datalist> 

        
     /*
     ***********************************
     input监听事件  当input获取焦点时执行filter_time方法
     ***********************************
     */


    $('#shouqian_huiyuan').bind('focus',filter_time);



 

        /*每秒监听输入 filter_staff_from_exist*/  

        var content = "";  不要删除，变量作用不让参数重复提交
          
        filter_time = function(){  
            //$(this).val('');/*清除数据*/  
            var time = setInterval(filter_staff_from_exist, 500);/*每0.5秒执行一次，time是停止本方法的参数*/  
            $(this).bind('blur',function(){  
                clearInterval(time); /*停止setInterval*/ 

            });  
        };  
          
        /*监听执行方法*/  
        filter_staff_from_exist = function(){  

            var user_name = $("#shouqian_huiyuan").val();
                    
                    
                    if(user_name != "")
                    {
                        

                        if(content != user_name)
                        {

                            content = user_name;

                            $("#city option").remove();

                            $.ajax({

                                url:'__CONTROLLER__/huiyuan_select',//提交的地址
                                type:'post',
                                data:{user_name:user_name},//参数根据用户编号检索
                                dataType:'json',

                                success:function(result){

                                    //console.log(result);
                                    
                                    if(result)
                                    {
                                        $.each(result, function(i, item) {

                                        $("#city").append("<option value='" + item.user_name + "'>" + item.uname + "</option>");//添加

                                        }); 
                                    }
                                 
                            
                                }

                            }) 
                        }
                        
                    }
                    
                 
        }  
    
   

版权声明：本文为司江龙原创文章，未经允许不得转载。https://mp.csdn.net/postedit/81411275