Ngx-Bootstrap Typeahead在输入清除时保留下拉值

Question

我最近将ngx-bootstrap从1.8.1升级到了3.0.1。升级后，前面的类型似乎无法正常工作。我正在使用这个例子： https://valor-software.com/ngx-bootstrap/#/typeahead#async-data

with [typeaheadMinLength] =“ 3”

现在，如果我进行搜索，可以说“ abcdef”，然后在键入3个字符（即abc）然后输入abcd，abcde，abcdef等之后就开始搜索。

但是现在，如果我一次使用退格键删除输入文本框中的所有内容，也就是说，如果我通过一次按下退格键使abcdef变为空，那么一旦输入为空，它将再次显示对应于最小长度的下拉值是abc。

理想情况下，它应该清除下拉列表中的值，但是看起来当您使用退格键快速删除它时，它会保留与最小长度令牌字符串相对应的值。

从服务中获取数据并且数据巨大时，它更加可见，因此需要花费一些时间来加载和清除。

可以使用typeaheadWaitMs模拟服务响应中的延迟，并且可以使用以下示例来复制此问题：https://valor-software.com/ngx-bootstrap/#/typeahead#delay

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

有人可以帮忙吗？

Answer 1

您必须检查搜索字段是否为空，然后清除包含值的列表。当按退格键时，发生的事情是，当搜索长度达到阈值即abc时，它将获取结果并存储该结果，然后再不执行任何操作，因此abc的搜索结果将保留下来。如果值为空，请添加(keyup)="onKey($event.target.value)"，清除包含下拉列表数据的列表。

Answer 2

作为一种解决方法，我删除了[typeaheadMinLength] =“ 3”，而是检查了服务器上的长度。如果前缀令牌的长度小于3，则服务器不执行任何操作，而是返回空数组。这不是最佳的解决方案，因为即使长度小于3，请求也将发送到服务器。

尽管我没有感觉到任何明显的性能影响，但如果在UI而不是服务器上完成，效果可能会更好。