Как настроить активный класс ngTypeahead (навигация по keyUp и Down)?

Question

Как настроить активный класс ngTypeahead (навигация по keyUp и Down)?

1

Это официальный плунжер ngTypeahead

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

Это ссылка github https://github.com/orizens/ngx-typeahead

Это staticList в ngxTypeahead. При навигации со стрелками keyUp и down у меня есть проблема.

Если число тиревых результатов равно 5, поэтому, когда я просматриваю параметры с помощью keyDown, после достижения 5-го числа, если я нажму кнопку KeyDown, он должен правильно выделить первый результат? Но resolNextIndex (как добавлено на изображении) имеет topLimit как 9, а нижний предел как 0 - 10 раз и, следовательно, добавление activeRsult, то есть выделение выбранного параметра не работает должным образом.

Как я могу это решить?

Есть ли способ настроить это добавление активной кнопки?

Потому что мне нужен typeahead, как показано ниже.

Первоначально результаты не должны быть выделены.
Только если пользователь нажимает keyUp, подсветка hightLighting должна происходить снизу вверх, так как входной ящик находится в нижней части экрана.
После перехода по клавишам к концу результатов typeahead, если я снова нажму кнопку KeyDown, он должен перейти к началу результата. Это должно соответствовать длине результатов.

Есть ли какая-либо другая библиотека, соответствующая моей потребности, или я могу настроить этот ngxTypeahed?

Любой ответ был бы оценен. Заранее спасибо!

Ramya S 14 фев. 2018, в 09:48

Источник

Теги:

angular

javascript

angular2-template

typeahead

1 ответ

Ещё вопросы

Ramya S · Answer 1 · 2018-02-15T05-47-00.000Z

Я изменил источник и импортировал локально. Я добавил еще один параметр для длины результатов и динамического изменения topLimit

ngx-typeahead.component

    navigateWithArrows(elementObs: Observable<{}>) {
        return elementObs
          .filter((e: any) => validateArrowKeys(e.keyCode))
          .map((e: any) => e.keyCode)
          .subscribe((keyCode: number) => {
            this.suggestionIndex = resolveNextIndex(
              this.suggestionIndex,**this.resultsLength**,
              keyCode === Key.ArrowUp
            );
            this.showSuggestions = true;
            this.cdr.markForCheck();
          });
      }

  listenAndSuggest() {
    return Observable.fromEvent(this.element.nativeElement, 'keyup')
      .filter((e: any) => validateNonCharKeyCode(e.keyCode))
      .map((e: any) => e.target.value)
      .debounceTime(300)
      .concat()
      .distinctUntilChanged()
      .filter((query: string) => query.length > 0)
      .switchMap((query: string) => this.suggest(query))
      .subscribe((results: string[]) => {
        this.results = results;
        **this.resultsLength = results.length-1;**
        this.showSuggestions = true;
        this.suggestionIndex = 0;
        this.cdr.markForCheck();
      });
  }

Это ngx-typeahead.util

export function resolveNextIndex(currentIndex: number, **resultsLength: number,** stepUp: boolean) {
  const step = stepUp ? 1 : -1;
  **const topLimit = resultsLength;**
  const bottomLimit = 0;
  const currentResultIndex = currentIndex + step;
  let resultIndex = currentResultIndex;
  if (currentResultIndex === topLimit + 1) {
    resultIndex = bottomLimit;
  }
  if (currentResultIndex === bottomLimit - 1) {
    resultIndex = topLimit;
  }
  return resultIndex;
}