Javascript 递归上一个和下一个箭头键，使用jquery按自定义自动完成

我已经开发了定制自动完成，它在页面中的数据提取和显示方面工作良好。我想加强它。我想在按下向下/向上箭头键时，在自动完成的下一个和上一个li上选择或设置焦点。这是我的jquery代码，它填充了自动完成

  $("input[data-tg-autocomplete]").keyup(function (e) {
    if (e.keyCode == 40 || e.keyCode == 38) {
        //alert(e.keyCode);
        DownUpKeyPress(e.keyCode);
    }
    else {
        var $input = $(this);
        //-----------------------------Allowing user to enter atleast one character for auto search
        if ($input.val().length > 0) {
            var request = $.ajax({
                url: $input.attr("data-tg-autocomplete"),
                method: "GET",
                data: { term: $input.val() },
                dataType: "json"
            });

            request.done(function (JsonData) {
                LoadAutoSuggest(JsonData);
            });

            request.fail(function (jqXHR, textStatus) {
                //alert("Request failed: " + textStatus);
            });
        }
    }

});
//========================populate autocomplete
function LoadAutoSuggest(result) {
    var tag = "";
    $('.custom-autocomplete').html("");
    if (result.Destination != undefined) {
        tag = tag + "<li class=''>";
        tag = tag + "<a href='#' class='list-group-item active disabled AutoCompleteHeader'>";
        tag = tag + "Destination";
        tag = tag + "</a>";
        tag = tag + "</li>";
        for (i = 0; i < result.Destination.length - 1; i++) {
            tag = tag + "<li class='list-group-item'>";
            tag = tag + "<a class='autocompleteListItem' data-type='Destination' data-id='" + result.Destination[i].DestinationID + "'>";
            tag = tag + "<div>";
            tag = tag + result.Destination[i].DestinationName;
            // tag = tag + "<span class='pull-right badge'>14</span>";
            tag = tag + "</div>";
            tag = tag + "</a>";
            tag = tag + "</li>";
        }
    }
    if (result.Business != undefined) {
        tag = tag + "<li class=''>";
        tag = tag + "<a href='#' class='list-group-item active disabled AutoCompleteHeader'>";
        tag = tag + "Business";
        tag = tag + "</a>";
        tag = tag + " </li>";
        for (i = 0; i < result.Business.length - 1; i++) {
            tag = tag + "<li class='list-group-item'>";
            tag = tag + "<a class='autocompleteListItem' data-type='Business' data-id='" + result.Business[i].BusinessID + "'>";
            tag = tag + "<div>";
            tag = tag + result.Business[i].BusinessName;
            // tag = tag + "<span class='pull-right badge'>14</span>";
            tag = tag + "</div>";
            tag = tag + "</a>";
            tag = tag + "</li>";
            //alert(result.Business[i].BusinessName + " ID = " + result.Business[i].BusinessID)
        }
    }
    $('.custom-autocomplete').html(tag);
    $('.autocompleteListItem').click(function () {
        var id = $(this).attr("data-id");
        var type = $(this).attr("data-type");
        var text = $(this).text();
        $("#searchtext").val(text);
        $('.HiddenSearchInput #id').val(id);
        $('.HiddenSearchInput #type').val(type);
        $('.custom-autocomplete').html("");
        $('.Search-submit').trigger("click");
    });
    $(':not(".search-wrapper")').click(function () {
        if ($('.custom-autocomplete li').length > 0) {
            $('.custom-autocomplete').html("");
        }
    });
    $('.custom-autocomplete li.list-group-item').first().addClass("focused");
}
function DownUpKeyPress(keyCode) {
    //$this = $(this);
    if (keyCode == 40) {
        // alert('40');
        // $this.next().focus();
        if ($('.custom-autocomplete li').length > 0) {
            var $focused = $('.custom-autocomplete li.focused');
            $('.custom-autocomplete li.focused ~ .list-group-item').first().addClass('focused')
            $focused.removeClass('focused')

        }
        return false;
    } else if (keyCode == 38) {
        //alert('38');
        // $this.prev().focus();
        if ($('.custom-autocomplete li').length > 0) {

        }
        return false;
    }
}

$（“输入[数据tg自动完成]”）.keyup（函数（e）{
如果（e.keyCode==40 | | e.keyCode==38）{
//警报（如钥匙代码）；
向下上按键（如按键代码）；
}
否则{
var$input=$（此）；
//-----------------------------允许用户输入至少一个字符进行自动搜索
如果（$input.val（）.length>0）{
var请求=$.ajax({
url:$input.attr（“数据tg自动完成”），
方法：“获取”，
数据：{term:$input.val（）}，
数据类型：“json”
});
request.done（函数（JsonData）{
LoadAutoSuggest（JsonData）；
});
请求失败（函数（jqXHR，textStatus）{
//警报（“请求失败：+textStatus”）；
});
}
}
});
//========================================填充自动完成
函数LoadAutoSuggest（结果）{
var tag=“”；
$（'.custom autocomplete'）.html（“”）；
if（result.Destination！=未定义）{
tag=tag+“
”；
标签=标签+“”；
标签=标签+“
”；
对于（i=0；i”；
标签=标签+“”；
标签=标签+“”；
对于（i=0；i”；
标签=标签+“”；
标签=标签+“”；
tag=tag+result.Business[i].BusinessName；
//标签=标签+“14”；
标签=标签+“”；
标签=标签+“”；
标签=标签+“”；
//警报（result.Business[i].BusinessName+“ID=“+result.Business[i].BusinessID））
}
}
$（'.custom autocomplete'）.html（标记）；
$（'.autocompletestitem'）。单击（函数（）{
var id=$（this.attr（“数据id”）；
var type=$（this.attr（“数据类型”）；
var text=$（this.text（）；
$（“#搜索文本”）.val（文本）；
$（'.HiddenSearchInput#id'）.val（id）；
$（'.HiddenSearchInput#type'）.val（type）；
$（'.custom autocomplete'）.html（“”）；
$（'.Search submit'）。触发器（“单击”）；
});
$（'：不是（“.search wrapper”）。单击（函数（）{
如果（$（'.custom autocomplete li'）。长度>0）{
$（'.custom autocomplete'）.html（“”）；
}
});
$（'.custom autocomplete li.list group item'）.first（）.addClass（“聚焦”）；
}
功能DownUpKeyPress（按键代码）{
//$this=$（this）；
如果（键代码==40）{
//警报（“40”）；
//$this.next（）.focus（）；
如果（$（'.custom autocomplete li'）。长度>0）{
var$focused=$（'.custom autocomplete li.focused'）；
$（'.custom autocomplete li.focused~.list group item'）.first（）.addClass（'focused'））
$focused.removeClass（'focused'）
}
返回false；
}else if（keyCode==38）{
//警报（“38”）；
//$this.prev（）.focus（）；
如果（$（'.custom autocomplete li'）。长度>0）{
}
返回false；
}
}

这是我的html，我在这里填充自动完成

   <div class="Search-container">
                <span class="error search-validation"></span>
                <div class="input-group input-group-lg">
                    <input id="searchtext" name="searchtext" type="text" class="form-control " placeholder="Find travel agents, search travel agents in your destination" data-tg-autocomplete="@Url.Action("AutocompleteBusiness")" />
                    <span class="input-group-btn">
                        <button class="btn btn-primary Search-submit" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div><!-- /input-group -->
                <div class="displaynone HiddenSearchInput">
                    <input type="hidden" id="id" name="id" value="" />
                    <input type="hidden" id="type" name="type" value="" />
                </div>
      </div>
      <ul class="list-group custom-autocomplete">
                @*List will be populated from ajax call in function LoadAutoSuggest*@
      </ul>

@*列表将从函数LoadAutoSuggest中的ajax调用填充*@

---

我的功能

DownUpKeyPress

用于设置下一个和上一个li的焦点。焦点li项将用于站点搜索，但当按下上/下箭头时，我无法设置下一个和上一个li的焦点。我使用MVC5开发我的项目。可能我对jquery有错误。有人可以帮我解决这个问题吗。我不想为此使用任何插件。

在

DownUpKeyPress

  // for up arrow => Previous Li Focus
  if (keyCode == 40) {
        if ($('.custom-autocomplete li').length > 0) {
            var oBox = $('.custom-autocomplete > .list-group-item.focused').next('li');
            var curClass = oBox.attr("class");
            if (oBox.length == 0) {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused');
                $('.custom-autocomplete > .list-group-item').first().addClass('focused');
            }
            else if (curClass == "") {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused').next('li').next('li').addClass('focused');
            }
            else {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused').next('li').addClass('focused');
            }
        }
        return false;
    } 
    // for down arrow => Next Li Focus
    else if (keyCode == 38) {
        if ($('.custom-autocomplete li').length > 0) {
            var oBox = $('.custom-autocomplete > .list-group-item.focused').prev('li');
            var curClass = oBox.attr("class");
            if (oBox.length == 0) {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused');
                $('.custom-autocomplete > .list-group-item').last().addClass('focused');
            }
            else if (curClass == "") {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused').prev('li').prev('li').addClass('focused');
            }
            else {
                $('.custom-autocomplete > .list-group-item.focused').removeClass('focused').prev('li').addClass('focused');
            }
        }
        return false;
    }

---

问题是什么？Alvaro，当用jquery按下向上/向下箭头时，我无法将焦点设置在下一个和上一个li上