Создать автозаполнение с пользовательской полосой прокрутки

Question

Я хочу сделать свое собственное автозаполнение с пользовательской полосой прокрутки , которую я использую ngScrollbar (mCustomScrollbar) , которую можно перемещать между строками с помощью клавиш вверх / вниз .

Теперь есть проблемы:

1- Когда я достигаю дна, например, при выборе следующей строки, прокрутка должна двигаться с помощью клавиши вниз, что не происходит ( почти решил это, но не хорошо).

2 - Когда я перемещаю полосу прокрутки с помощью мыши, и полоса прокрутки идет туда, где строка не выделена. Когда я двигаюсь с помощью клавиш вверх / вниз, полоса прокрутки должна прийти туда, где выбрана новая строка.

Что я хочу?

Я хочу переключаться между строками, когда хочу использовать клавиши вверх / вниз. Если бы я был в диапазоне прокрутки, прокрутка не двигалась бы. Но когда строка за пределами диапазона прокрутки должна быть выбрана, перемещайте прокрутку по мере необходимости. И когда я переместил прокрутку с помощью мыши в место, где не было выбора, я захотел снова работать с клавишами вверх / вниз, прокрутка переместилась туда, где была выбрана новая строка.

HTML

<input id="search" type="text" class="form-control pl-5" aria-label="Text input with dropdown button" dir="rtl"
       ng-keydown="self.Func.onSearchResultKeydown($event, self.Data.searchResultList)"
       ng-model="self.Data.search">

<ul id="searchResult" class="list-group text-right" ng-scrollbars
    ng-scrollbars-config="self.Data.configScrollView">
    <li id="{{searchResult.isin}}" class="list-group-item"
        ng-repeat="searchResult in self.Data.searchResultList track by $index"
        ng-class="{'drop-down-active-element': searchResult.isin === self.Data.focusedObj.isin}">
        <div class="row">
           <div class="col-md-10" ng-bind-html="searchResult.title | highlightText: self.Data.search"></div>
        </div>
   </li>
</ul>

JS

onSearchResultKeydown: function (event, array) {
        // ArrowDown
        if (event.keyCode === 40) {
            self.Func.stopPropagationPreventDefault(event);
            self.Data.keyDownIndex++;
            if (self.Data.keyDownIndex < array.length) {
                self.Data.focusedObj = array[self.Data.keyDownIndex];
                // FIXME
                var docViewBottom = $('#searchResult').height();
                var elemTop = $('#' + self.Data.focusedObj.isin).offset().top;
                if ((elemTop - 100) > docViewBottom) {
                    $('#searchResult').mCustomScrollbar("scrollTo", "-=50", {
                        scrollInertia: 1
                    });
                }
            }
            else {
                self.Data.keyDownIndex = 0;
                self.Data.focusedObj = array[self.Data.keyDownIndex];
                $('#searchResult').mCustomScrollbar("scrollTo", "top", {
                    scrollInertia: 1
                });
            }
        }
        // ArrowUp
        else if (event.keyCode === 38) {
            self.Func.stopPropagationPreventDefault(event);
            self.Data.keyDownIndex--;
            if (self.Data.keyDownIndex >= 0) {
                self.Data.focusedObj = array[self.Data.keyDownIndex];
                // FIXME
                var docViewBottom = $('#searchResult').height();
                var elemTop = $('#' + self.Data.focusedObj.isin).offset().top;
                if ((docViewBottom - (elemTop - 150)) >= docViewBottom) {
                    $('#searchResult').mCustomScrollbar("scrollTo", "+=50", {
                        scrollInertia: 1
                    });
                }
            }
            else {
                self.Data.keyDownIndex = array.length - 1;
                self.Data.focusedObj = array[self.Data.keyDownIndex];
                $('#searchResult').mCustomScrollbar("scrollTo", "bottom", {
                    scrollInertia: 1
                });
            }
        }
        // Enter
        else if (event.keyCode === 13) {
            self.Func.selectSearchResult(array[self.Data.keyDownIndex]);
        }
    }

Я знаю, что мне нужно работать с этими кодами, чтобы достичь своей цели, но я не знаю, как!

var docViewBottom = $('#searchResult').height();
                var elemTop = $('#' + self.Data.focusedObj.isin).offset().top;
                if ((elemTop - 100) > docViewBottom) {
                    $('#searchResult').mCustomScrollbar("scrollTo", "-=50", {
                        scrollInertia: 1
                    });
                }

Если вы не понимаете где-то, пожалуйста, скажите мне, чтобы объяснить.