Ngx-Bootstrap Typeahead在输入清除时保留下拉值 [英] Ngx-Bootstrap Typeahead retaining dropdown values on input clear

问题描述

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

I've recently upgraded the ngx-bootstrap from 1.8.1 to 3.0.1 . After the upgrade type ahead doesn't seem to work as expected. I'm using this example : https://valor-software.com/ngx-bootstrap/#/typeahead#async-data

with [typeaheadMinLength] ="3"

with [typeaheadMinLength]="3"

现在，如果我进行搜索，可以说"abcdef"，然后在键入3个字符(即abc)然后输入abcd，abcde，abcdef等之后就开始搜索.

Now , if I search, lets say "abcdef" then it starts searching after 3 characters have been typed that is abc and then abcd, abcde, abcdef and so on which is fine.

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

But now if I delete everything in input textbox using backspace in one go, that is if I make abcdef to empty by pressing backspace in one go, then once input is empty, it shows drop down values again which correspond to min length which is abc.

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

Ideally it should clear drop down values but looks like when you delete it very fast using backspace, it retains the values corresponding to min length token string.

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

It is more visible when data is fetched from a service and the data is huge, so it takes some time to load and clear.

可以使用typeaheadWaitMs模拟服务响应中的延迟，并且可以使用以下示例来复制此问题:

Delay in service response can be emulated using typeaheadWaitMs and this issue can be replicated using this example : https://valor-software.com/ngx-bootstrap/#/typeahead#delay

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

有人可以帮忙吗?

推荐答案

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

As a workaround, I removed [typeaheadMinLength]="3" and instead checked the length on server. If length of prefix token is less than 3 , server doesn't do anything and instead returns empty array. This isn't the optimal solution ofcourse because even for length less than 3, requests will go to the server.

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

Although, I didn't feel any visible performance impact but still it could be better if done on UI rather than server.

这篇关于Ngx-Bootstrap Typeahead在输入清除时保留下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！