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

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

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

angularjs angular-ui

— wa
source

将绑定功能绑定到angular-ui的预输入会导致性能问题。由（angularui.net）

— Mehmet Otkun

Answers:

119

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

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

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

最好的是，您的函数可以返回一个Promise，并且该TypeAhead将被正确识别。

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

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

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

— pkozlowski.opensource
source

甜！玛哈洛语法“ state for state in”对我来说仍然没有意义，但效果很好。

— 约瑟夫·奥斯特

你可以用$ http和成功方法举个例子吗？我对此有疑问，而且整天都没有解决。

— 阿里

用.then(function(response){ return response.data; })

— Maxence

有什么方法可以防止您输入时闪烁结果？

— 加百利·西蒙

@GabrielSyme您在这里提到的闪烁内容已固定在0.7.0（刚刚发布！）中。

— pkozlowski.opensource，

没有代表对此发表评论，因此发布作为答案（对不起！）

如果您使用的是引导程序的较新版本，则需要在typeahead前面添加uib-（就像这样）

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

— 乔夫
source