递归上一个和下一个在箭头键按下自定义自动完成与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;
    }
}

这里是我的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>

我的函数DownUpKeyPress用于设置下一个和上一个li的焦点。聚焦的li项目将用于网站搜索，但当向上/向下箭头被按下时，我无法将焦点设置在下一个和上一个li上。我使用MVC5来开发我的项目。也许我对jquery的理解是错误的。可能有人帮我解决这个问题。我不想使用任何插件为这个