一尘不染

如何通过$ http将angular-ui的预输入与服务器绑定以进行服务器端优化?

angularjs

typeahead示例(http://angular-
ui.github.io/bootstrap/#/typeahead)提到在此自动完成中实现后端很容易,但没有提供示例。我特别感兴趣的是找出当前输入的字符串,以便可以将
发送到服务器并发送回已过滤的结果-
我想在服务器端进行此优化并最小化查询,我不认为返回对于数据库中具有超过200,000个条目的应用程序,整个结果集并仅排除不匹配项以供显示是可行的。

在这种情况下,我应该完全忘记提前输入并实施带有下拉菜单的自定义解决方案,还是可以轻松地做到这一点?


阅读 202

收藏
2020-07-04

共1个答案

一尘不染

有一种方法可以非常轻松地实现此目的,而无需推出您的自定义解决方案(至少在这种情况下不行!)。基本上,您可以将任何函数用作typeaheads表达式的一部分,例如:

<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">

从该示例可以看到,getStates($viewValue)可以调用方法(在范围内定义),并且该方法$viewValue对应于用户输入的值。

最好的是,您的函数可以返回一个promise,并且该typemhead将被正确地识别。

前段时间,我编写了一个示例插件,展示了如何使用服务器端调用来提供自动完成功能。选中显示美国所有城市自动填充的代码(基于geobytes.com),这些城市通过JSONP服务实时查询城市:

http://plnkr.co/edit/t1neIS?p=preview

请查看它,以获取有关如何在服务器端进行过滤的有效示例(您需要至少键入3个字符才能看到结果)。当然,您不仅限于jsonp调用,还可以使用任何返回诺言的方法。

2020-07-04