如何通过$ http为服务器端优化将angular-ui的typeahead与服务器联系起来？

Question

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

在这种情况下,我是否应该完全忘记预先输入并使用下拉列表实现自定义解决方案,还是有办法轻松完成此操作？

Answer 1

有一种方法可以非常轻松地实现这一点,无需推出自定义解决方案(至少不适用于这种情况!).基本上你可以使用任何函数作为typeaheads表达式的一部分,例如:

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

从这个例子中可以看出,getStates($viewValue)可以调用方法(在范围上定义),并且该方法$viewValue对应于用户输入的值.

这里最好的是你的函数可以返回一个promise,这个promise将被typeahead正确识别.

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

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

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

Answer 2

没有代表发表评论所以张贴作为答案（对不起！）

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

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