搜索框上下鍵盤選擇聯(lián)想結(jié)果？

寫一個(gè)搜索框鍵盤選擇聯(lián)想結(jié)果，但是下鍵是從第二個(gè)開始的，但是我不從第二個(gè)開始又不行，因?yàn)槲摇発eycode == resultLength-1”的時(shí)候就讓keycode=0了，所以=0的時(shí)候我只能讓它先++，這種情況就是只有第一次按下它才從第二個(gè)結(jié)果開始，其他都正常。。。我不知道咋寫了，求支出小弟的邏輯錯(cuò)誤，昨天弄了一天沒整明白。
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默認(rèn)提交事件
    $(".search-content").keydown(function(event){
        switch(event.keyCode){
            case 13 : return false;
        }
    })
    //搜索框部分
var arr = ["上城區(qū)","華龍家園","望江街道","華龍家園","濱江區(qū)","華龍家園","江干區(qū)","華龍家園","下城區(qū)","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");
    }
    //鍵盤輔助搜索結(jié)果的選擇
    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")
    }
    //封裝一個(gè)方法
    function class1(){
        var oLi = $(".associate").find("li:eq("+keycode+")")
        oLi.css("background","rgb(226, 223, 223)").siblings().css("background","");
        //oLi.addClass("modern")
    }
   //點(diǎn)擊搜索結(jié)果改變搜索框的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","")
        })
    })
})

部分代碼已經(jīng)貼出，主要問題在鍵盤下鍵部分，求幫我拍一下，實(shí)在是暈了。。。

回答

編輯回答

乞許

之前寫過一個(gè)用百度智能提示練習(xí)jsonp的，里面有上下鍵選擇功能，僅供參考。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        html, body { height: 100%; width: 100%; text-align: center;background:url(images/bg.jpg) center center no-repeat;background-size:cover; }
        input { width: 800px; height: 40px; border: 1px solid #ccc; outline: none; padding: 5px 10px; margin-top: 300px; font-size: 16px; font-family: 'Microsoft YaHei'; background: rgba(255,255,255,0.8); }
        ul { width: 820px; margin: 0 auto; list-style: none; margin-top: -1px;background:rgba(255,255,255,0.8); }
            ul.border { border: 1px solid #ccc; }
        li { line-height: 40px; text-align: left; padding: 0 10px; cursor: pointer; }
            li.active { background: #0094ff; color: #fff; }
    </style>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script>
        function getData(data) {
            var list = data.s;
            var html = '';
            $.each(list, function (index, item) {
                html += "<li>" + item + "</li>";
            });
            $("ul").addClass("border").html(html);
        }

        function search(kw) {
            window.location. + encodeURIComponent(kw);
        }

        $(function () {
            $("input").focus().keyup(function (e) {
                var kw = $(this).val();
                if (!kw) {
                    $("ul").removeClass("border").html("");
                    return;
                }

                if (e.keyCode == 13) {
                    var kw = $(this).val();
                    if (!kw) {
                        return;
                    }
                    search(kw);
                }
                else if (e.keyCode == 38) {
                    var active = $("li.active");
                    if (active.length) {
                        var prev = active.prev();
                        if (prev.length) {
                            prev.addClass("active").siblings().removeClass("active");
                        }
                        else {
                            $("li:last").addClass("active").siblings().removeClass("active");
                        }
                    }
                    else {
                        $("li:last").addClass("active");
                    }
                    $("input").val($("li.active").text());
                }
                else if (e.keyCode == 40) {
                    var active = $("li.active");
                    if (active.length) {
                        var next = active.next();
                        if (next.length) {
                            next.addClass("active").siblings().removeClass("active");
                        }
                        else {
                            $("li:first").addClass("active").siblings().removeClass("active");
                        }
                    }
                    else {
                        $("li:first").addClass("active");
                    }
                    $("input").val($("li.active").text());
                }
                else {
                    $.ajax({
                        type: "get",
                        url: "http://suggestion.baidu.com/su",
                        data: { 'wd': kw, 'p': '3', 'cb': 'getData', 't': new Date().getMilliseconds().toString() },
                        dataType: "jsonp",
                        success: function (data) { },
                        error: function () { }
                    });
                }
            });

            $("ul").on("click", "li", function () {
                search($(this).text());
            });
        });
    </script>
</head>
<body>
    <input type="text" placeholder="百度一下" />
    <ul></ul>
</body>
</html>

2017年10月30日 04:13