百度联想词，上键有bug怎么办，求那位大佬帮我看看

就是点击上键点多了（超出keyword的盒子，不会循环起来了），它的keyword里面的span标签颜色不会改变，而且会清空input里面的值。

代码如下：

`

    <style>
                    .form

{ width: 600px; height: auto; margin: 100px auto 0; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; }

.search { width: 100%; height: 40px; background-color: transparent; border: none; border-radius: 20px; outline: none; padding-left: 20px; box-sizing: border-box; }

.button { width: 40px; height: 40px; background-color: black; border-radius: 20px; cursor: pointer; outline: none; border: none; color: white; position: absolute; top: 0; right: 0; }

.keyword span { display: block; width: 100%; height: 34px; padding: 0 0 0 20px; line-height: 34px; border-top: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; cursor: pointer; user-select: none; }

    <div class="form">
            <form action="https://www.baidu.com/s?wd" target="_blank" method="get">
                    <input type="text" name="wd" autofocus="" autocomplete="off" class="search">
                    <button class="button">搜</button>
            </form>
            <div class="keyword"></div>
    </div>

    <script src="js/jquery-2.1.3.min.js" charset="utf-8"></script>
    <script>
                    $(document).ready(function(){
                                                    var search_1 = $(".search");
                                                    search_1.keyup(function(event){
                                                                                    if(search_1.val() == "" || search_1.val() == "")
                                                                                    {
                                                                                    return;
                                                                                    }
                                                                                    if(event.which != 39 && event.which != 40 && event.which != 37 && event.which != 38 && event.which != 13 && event.which != 27)
                                                                                    $.ajax({
                                                                                            url: "https://suggestion.baidu.com/su",
                                                                                            type: "GET",
                                                                                            dataType: "jsonp",
                                                                                            jsonp: 'jsoncallback',
                                                                                            async: false,
                                                                                            timeout: 5000,
                                                                                            data:{
                                                                                                    "wd": search_1.val(),
                                                                                                    "cb": "keydata"
                                                                                                    },
                                                                                            success: function(json){},
                                                                                            error: function(xhr)
                                                                                            {
                                                                                                    return;
                                                                                            }
                                                                                    });
                                                                            }
                                                                  );
                                                }
                                     );


                    function keydata(keys)
                    {
                            var len = keys.s.length;
                            var keyword = $(".keyword");
                            var search_2 = $(".search");
                    var button = $(".button");
                    
                    if(len == 0)
                    {
                                    keyword.css({display: "none"});
                    }
                    else
                    {
                                    keyword.css({display: "block"});
                    }

                    setInterval(() =>{
                                            if(search_2.val() == '')
                                            {
                                            keyword.css({display: "none", height: "auto"});
                                            keyword.empty();
                                            }
                                    }
                            )
                    
                    var spans="";
                    
                            for(var i=0; i<len; i++)
                            {
                                    spans += "<span>" + keys.s[i] + "</span>"
                    }
                    
                            keyword.html(spans);
                            keyword.animate({ height: (keyword.children().height() + 1) * len },100);

                            keyword.children().click(function(){
                                                            search_2.val($(this).html());
                                                            
                                                            keyword.animate({
                                                                                    height: 0
                                                                                    },10,function()
                                                                                    {
                                                                                    keyword.css({display: "none", height: "auto"});
                                                                                    keyword.empty();
                                                                            });
                                                            
                                                            search_2.focus();
                                                            $(".form form").submit();
                                                    }
                                            );
                            
                            button.focus(function(){
                                                    keyword.animate({
                                                                    height: 0
                                                                    },10,function()
                                                                    {
                                                                            keyword.css({display: "none", height: "auto"});
                                                                            keyword.empty();
                                                            });
                                            }
                                    );
                                    
                            keyword.children().mouseleave(function(){
                            numspan=$(this).index();
                            for(var i=0; i<len; i++)
                            {
                                    if(numspan == i)
                                    {
                                    keyword.children().eq(i).css({ "background-color": "transparent" });
                                    }
                                    else
                                    {
                                    keyword.children().eq(i).css({ "background-color": "transparent" });
                                    }
                            }
                                                    }
                                    );
                                    
                            var numspan = 0;
                            search_2.keydown(function(event){
                                                            if(event.which == 13)
                                                            {
                                                            keyword.animate({
                                                                                    height: 0
                                                                                    },10,function()
                                                                                    {
                                                                                    keyword.css({display: "none", height: "auto"});
                                                                                    keyword.empty();
                                                                            });
                                                            }

                                                            if(event.which == 40)
                                                            {
                                                            if(numspan == len)
                                                                    numspan=0;
                                                                    
                                                            for(var i=0; i<len; i++)
                                                            {
                                                                    if(numspan == i)
                                                                    {
                                                                    keyword.children().eq(i).css({ "background-color": "rgba(0,0,0,0.1)" });
                                                                    }
                                                                    else
                                                                    {
                                                                    keyword.children().eq(i).css({ "background-color":"rgba(255,255,255,0.1)" });
                                                                    }
                                                            }
                                                            search_2.val(keyword.children().eq(numspan).html());
                                                            numspan++;
                                                            }

                                                            if(event.which == 38)
                                                            {
                                                            numspan--;
                                                            if(numspan == len)
                                                                    numspan=0;
                                                                    
                                                            for(var i=0; i<len; i++)
                                                            {
                                                                    if(numspan == i)
                                                                    {
                                                                    keyword.children().eq(i).css({ "background-color":"rgba(0,0,0,0.1)" });
                                                                    }
                                                                    else
                                                                    {
                                                                    keyword.children().eq(i).css({ "background-color":"rgba(255,255,255,0.1)" });
                                                                    }
                                                            }
                                                            
                                                            search_2.val(keyword.children().eq(numspan).html());
                                                            }

                                                            if(event.which == 27)
                                                            {
                                                            // if($(".keyword").is(":visible"))
                                                            // {
                                                                    keyword.animate({
                                                                    height: 0
                                                                    },10,function()
                                                                    {
                                                                            keyword.css({display: "none", height: "auto"});
                                                                            keyword.empty();
                                                            });
                                                            // }
                                                            }
                                                    }
                                    );

                    document.onclick = function()
                    {
                            // if($(".keyword").is(":visible"))
                            //                                     {
                                                                    keyword.animate({
                                                                    height: 0
                                                                    },10,function()
                                                                    {
                                                                            keyword.css({display: "none", height: "auto"});
                                                                            keyword.empty();
                                                            });
                                                            // }
                    }
                                                    
                            keyword.children().mouseover(function(){
                                                                    numspan=$(this).index();
                                                                    for(var i=0; i<len; i++)
                                                                    {
                                                                            if(numspan == i)
                                                                            {
                                                                            keyword.children().eq(i).css({ "background-color":"rgba(0,0,0,0.1)" });
                                                                            }
                                                                            else
                                                                            {
                                                                            keyword.children().eq(i).css({ "background-color":"rgba(255,255,255,0.1)" });
                                                                            }
                                                                    }
                                                                    
                                                                    // search_2.val(keyword.children().eq(numspan).html());
                                                            }
                                                    );
                    }
    </script>

`