Ngx-Bootstrap Typeahead, сохраняющий выпадающие значения при очистке ввода

Question

Я недавно обновил ngx-bootstrap с 1.8.1 до 3.0.1. После обновления тип не работает должным образом. Я использую этот пример: https://valor -software.com / NGX-самозагрузка / # / машинописная # асинхронные данные

с [typeaheadMinLength] = "3"

Теперь, если я выполняю поиск, скажем, «abcdef», он начинает поиск после того, как были набраны 3 символа, то есть abc, а затем abcd, abcde, abcdef и т. Д., Что нормально.

Но теперь, если я удаляю все во входном текстовом поле, используя backspace за один раз, то есть, если я делаю abcdef пустым, нажимая backspace за один раз, то, когда ввод пуст, он снова показывает выпадающие значения, которые соответствуют минимальной длине который abc.

В идеале он должен сбрасывать выпадающие значения, но, похоже, когда вы очень быстро удаляете его с помощью backspace, он сохраняет значения, соответствующие строке токена минимальной длины.

Он более заметен, когда данные извлекаются из службы, а объем данных огромен, поэтому для загрузки и очистки требуется некоторое время.

Задержка ответа службы может быть эмулирована с использованием typeaheadWaitMs, и эта проблема может быть воспроизведена с использованием следующего примера: https://valor -software.com / ngx-bootstrap / # / typeahead # delay

https://github.com/valor-software/ngx-bootstrap/issues/4412

Может кто-нибудь помочь с этим?

Answer 1

В качестве обходного пути я удалил [typeaheadMinLength] = "3" и вместо этого проверил длину на сервере. Если длина префиксного токена меньше 3, сервер ничего не делает и вместо этого возвращает пустой массив. Это не оптимальное решение, потому что даже при длине менее 3 запросы будут отправляться на сервер.

Хотя я не почувствовал какого-либо видимого влияния на производительность, но все же было бы лучше, если бы это было сделано на пользовательском интерфейсе, а не на сервере.

Answer 2

Вы должны поставить галочку, если поле поиска пустое, а затем очистить список, содержащий значения. При нажатии клавиши Backspace происходит то, что, когда длина поиска достигает порогового значения, то есть abc, она извлекает результат и сохраняет его после того, как никакая операция не выполняется, следовательно, результаты поиска для abc сохраняются. Добавьте (keyup)="onKey($event.target.value)", если значение пусто, очистите список, содержащий ваши выпадающие данные.