账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    搜索框上下键盘选择联想结果?
    33
    0

    写一个搜索框键盘选择联想结果,但是下键是从第二个开始的,但是我不从第二个开始又不行,因为我“keycode == resultLength-1”的时候就让keycode=0了,所以=0的时候我只能让它先++,这种情况就是只有第一次按下它才从第二个结果开始,其他都正常。。。我不知道咋写了,求支出小弟的逻辑错误,昨天弄了一天没整明白。
    html代码:

    <form action="" name="" class="clearfix">
            <div class="search-btn">
                    <i class="fa fa-search"></i>
            </div>
            <ul class="associate">
            </ul>
        </form>

    JS代码

    <script>
        //取消文本框enter默认提交事件
        $(".search-content").keydown(function(event){
            switch(event.keyCode){
                case 13 : return false;
            }
        })
        //搜索框部分
    var arr = ["上城区","华龙家园","望江街道","华龙家园","滨江区","华龙家园","江干区","华龙家园","下城区","1846375XXXX","17600483XXX","18463758XXX","hangzhouhangzhou","05716482558"];
    var str = "";
    var searchNum;
    var keycode = 0;
    $(".search-content").keyup(function(event){
        //var resultLength = $(".associate li").length;
        str = "";
        searchNum = 0;
        var search_content = $(this).val();
        var reg = new RegExp("^"+search_content,"i");
        if(search_content.trim().length !== 0){
            $(".associate").css("display","block");
            for(var i in arr){
                if(arr[i].match(reg) && searchNum < 11){
                    if(/^1(3|4|5|7|8)\d{1,9}$/.test(search_content)){
                        str += "<li id='1'><i class='fh fh-icon-phone'></i>"+arr[i]+"</li>"+"<li id='2'><i class='fh fh-computer-list'></i>"+arr[i]+"</li>";
                        searchNum++;
                    }else{
                        str += "<li>"+arr[i]+"</li>"
                        searchNum++;
                    }
                }
            }
            $(".associate").html(str);
        }else{
            str = "";
            $(".associate").css("display","none");
        }
        //键盘辅助搜索结果的选择
        var resultLength = $(".associate li").length;
        if(event.keyCode == 38 && keycode < resultLength+1){
            //键盘上键
            if(keycode == resultLength){
                keycode--;
                class1()
            }else if(keycode == 0){
                keycode = resultLength-1;
                class1()
            }else{
                keycode--;
                class1()
            }
            //键盘下键
        }else if(event.keyCode == 40 && keycode > -1){
            if(keycode == resultLength-1){
                keycode = 0;
                class1()
            }else if(keycode == 0){
                keycode++;
                class1()
            }else{
                keycode++;
                class1()
            }
            //enter键
        }else if(event.keyCode == 13){
            $(".search-content").val($(".associate").find("li:eq("+keycode+")").text());
            $(".associate").css("display","none")
        }
        //封装一个方法
        function class1(){
            var oLi = $(".associate").find("li:eq("+keycode+")")
            oLi.css("background","rgb(226, 223, 223)").siblings().css("background","");
            //oLi.addClass("modern")
        }
       //点击搜索结果改变搜索框的value
        $(".associate li").each(function(){
            $(this).click(function(){
                $(".search-content").val($(this).text());
                localStorage.setItem("numId",$(this).attr("id"))
            })
            $(this).hover(function(){
                $(this).css("background","rgb(226, 223, 223)")
            },function(){
                $(this).css("background","")
            })
        })
    })

    部分代码已经贴出,主要问题在键盘下键部分,求帮我拍一下,实在是晕了。。。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 来⊙日无期ε 普通会员 1楼

      在Windows系统中,你可以在搜索框上下键盘选择联想结果。首先,打开搜索框,然后在键盘上按下键盘上的Ctrl键,然后在搜索框中输入你想要查找的内容。在搜索框中输入后,按下键盘上的Enter键,你就可以在搜索框中看到与你输入内容相关的联想结果了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部