您的位置:首页 > 其它

类型百度的输入框自动输入功能

2014-07-24 15:39 190 查看
js:

$(function(){
            RegisterKeyUp();
            RegisterKeyDownUp();
            RegisterFocusOut();
            ClickGetValue();
        })
        
        //提示框是否显示
        var isShow=false;
        
        //注册按键弹起事件
        function RegisterKeyUp(){
            $("#txtMobileTypeID").keyup(function(event){
                var e = event || window.event || arguments.callee.caller.arguments[0]; 
                if(e.keyCode!="37" && e.keyCode!="38" && e.keyCode!="39" && e.keyCode!="40" && e.keyCode!="13"){//屏蔽方向键
                    if($.trim($("#txtMobileTypeID").val())!=""){
                        //异步获取内容
                        SetContent();
                    }
                    else{
                        ClearContent();
                        hideBox();
                    }//38 40
                }
            })
        }
        
        //注册失去焦点事件
        function RegisterFocusOut(){
            $("#txtMobileTypeID").click(function(){
                hideBox();
            })
        }
        
        //隐藏结果框
        function hideBox(){
            $("#content").parent().hide();
            isShow=false;
        }
        
        //展示结果框
        function showBox(){
            currentIndex=0;
            $("#content").parent().show("flow");
            isShow=true;
        }
        
        //获取内容
        function SetContent(){
            ClearContent();
            $.post("ajax.aspx",{Action:"GetMobTypeContent",mobclassid:$("#ddlstMobileClassID option:selected").val(),lt:$("#txtMobileTypeID").val()},function(data){
                if(data!=""){
                    $("#content").html(data);
                    //显示
                    AutoHeight();
                    showBox();
                    //设置第一个选中
                    SelectItem($("#content li").eq(0));
                    //SetValue();
                }
                else{
                    ClearContent();
                    hideBox();
                }
            })
        }
        
        //清空内容
        function ClearContent(){
            $("#content").html("");
        }
        
        //监听上下方向键
        var currentIndex=0;
        function RegisterKeyDownUp(){
            $("#txtMobileTypeID").keydown(function(event){
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e.keyCode=="38" || e.keyCode=="40" || e.keyCode=="13"){
                    var lis=$("#content li");
                    var len=$(lis).length;
                    if(len>0){
                        if(e.keyCode=="38"){//up
                            if(currentIndex>0){
                                if(currentIndex>0) currentIndex--;
                                SelectItem($(lis).eq(currentIndex));
                            }
                            else{
                                currentIndex=len-1;
                                SelectItem($(lis).eq(currentIndex));
                            }
                            SetValue();
                            AutoScrollUp();
                        }
                        if(e.keyCode=="40"){//down
                            if(currentIndex<len-1){
                                if(currentIndex<len-1) currentIndex++;
                                SelectItem($(lis).eq(currentIndex));
                            }
                            else{
                                currentIndex=0;
                                SelectItem($(lis).eq(currentIndex));
                            }
                            SetValue();
                            AutoScrollDown();
                        }
                        if(e.keyCode=="13"){//回车   触发查询事件
                            if($.trim($("#txtMobileTypeID").val())!=""){
                                //alert("查询结果!");
                                hideBox();
                                //$("#c_btnQuery").click();
                            }
                        }
                    }
                }
            })

        }
        
        //设置选中项
        function SelectItem(obj){
            $("#pp li").removeClass("cc");
            $(obj).addClass("cc");
            GetFocus();
        }
        
        function SetText(txt){
            $("body p").eq(0).text(txt);
        }
        
        //设置输入框焦点
        function GetFocus(){
            $("#txtMobileTypeID").focus();
        }
        
        //设置输入框的值
        function SetValue(){
            $("#txtMobileTypeID").val($("#pp .cc").eq(0).text());
        }
        
        //自动适应高度
        function AutoHeight(){
            var len=$("#pp li").length;
            var hei=22*len;
            if(hei<300){
                $("#pp").css("height",hei+"px");
            }
            else{
                $("#pp").css("height","300px");
            }
        }
        
        //点击项并获取值
        function ClickGetValue(){
            $("#pp li").live("click",function(){
                SelectItem($(this));
                var currentitem=GetCurrentSelect();
                $("#txtMobileTypeID").val($(currentitem).text());
                currentIndex=GetItemIndex($(currentitem));
            })
        }
        
        //div内容自动向下滚动
        function AutoScrollDown(){
            if($("#pp .cc").length!=0){
                var currentindex=GetCurrentIndex();
                var itemcount=currentindex+1;
                if($("#pp").scrollTop()>=itemcount*22){//如果是最下面就到第一个
                    $("#pp").scrollTop(0);
                }
                if(itemcount*22>($("#pp").scrollTop()+300)){//如果当前项被遮住了就滚动滚动条
                    $("#pp").scrollTop($("#pp").scrollTop()+22*13);
                }
                next=0;
            }
        }
        
        //div内容自动向上滚动
        var next=0;
        function AutoScrollUp(){
            if($("#pp .cc").length!=0){
                var currentindex=GetCurrentIndex();
                var itemcount=currentindex+1;
                if(currentindex==0){//如果是最上面就到最后一个
                    next=1;
                }
                if((currentindex+1)==$("#pp li").length && next==1){
                    $("#pp").scrollTop(100000);
                    next=0;
                }
                if(itemcount*22<=$("#pp").scrollTop()){//如果当前项被遮住了就滚动滚动条
                    $("#pp").scrollTop($("#pp").scrollTop()-22*13);
                }
            }
        }
        
        //获取一个元素的index
        function GetItemIndex(obj){
            return $("#pp li").index($(obj));
        }
        
        //获得当前选中项
        function GetCurrentSelect(){
            return $("#pp .cc").eq(0);
        }
        
        //获取当前选中项的index
        function GetCurrentIndex(){
            return GetItemIndex(GetCurrentSelect());
        }


html:

<style type="text/css">
        .cc{background-color:red;}
        #content li{list-style:none; width:200px;}
    </style>

<body>
    <p></p>
    <div style="margin-left:auto; margin-right:auto;position:relative;">
        <div>
            <input id="Text1" style="width:200px;" type="text" />
        </div>
        <div id="pp" style="position:absolute;display:none; border:solid 1px black; width:204px;">
            <ul id="content" style="margin:0; padding:0; width:200px;">
                
            </ul>
        </div>
    </div>
</body>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐