69

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

在这种情况下,我应该完全忘记预先输入并使用下拉菜单实现自定义解决方案,还是有办法轻松做到这一点?

4

2 回答 2

119

有一种方法可以很容易地实现这一点,无需推出您的自定义解决方案(至少在这种情况下不是!)。基本上,您可以使用任何函数作为 typeaheads 表达式的一部分,例如:

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

正如您从这个示例中看到的,getStates($viewValue)可以调用方法(在作用域上定义)并且$viewValue对应于用户输入的值。

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

前段时间,我编写了一个示例 plunk,展示了如何使用服务器端调用来提供自动完成功能。检查这个显示美国所有城市的自动完成功能(基于 geobytes.com)的 plunk,其中城市是从 JSONP 服务实时查询的:

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

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

于 2013-04-10T15:49:33.470 回答
5

Don't have the rep to comment so posting as an answer (sorry!)

If you are using a newer version of bootstrap you need to add uib- in front of typeahead (like so)

<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
于 2017-02-13T19:49:23.793 回答