如何通过$ http将angular-ui的typeahead与服务器绑定以进行服务器端优化?
typeahead示例( http://angular-ui.github.io/bootstrap/#/typeahead )提到在这个自动完成中实现后端很容易,但没有提供任何示例。 我特别感兴趣的是找出当前input的string,以便我可以发送到服务器,并发送一个已经过滤的结果 – 我想做这个优化服务器端,尽量减less我的查询,我不认为返回整个结果集,只是排除不匹配的项目显示是可行的,在数据库中有超过200,000条目的应用程序。
在这种情况下,我是否应该完全忘记键入并实现具有下拉的自定义解决scheme,还是有办法轻松完成此操作?
有一种方法很容易实现,不需要推出自定义解决scheme(至less不是这种情况!)。 基本上,你可以使用任何函数作为typeaheadsexpression式的一部分,例如:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
正如你可以从这个例子看到的getStates($viewValue)
方法(在一个范围上定义)可以被调用, $viewValue
对应于一个用户input的值。
这里最好的是你的函数可以返回一个承诺,这个承诺将被前面的正确识别。
前段时间我写了一个示例plunk,展示了如何使用服务器端调用来提供自动完成。 检查显示美国所有城市(基于geobytes.com)的自动完成function,从JSONP服务中实时查询城市:
http://plnkr.co/edit/t1neIS?p=preview
查看一下如何在服务器端进行过滤的工作示例(您需要键入至less3个字符才能看到结果)。 当然,你不限于jsonp调用,你可以使用任何方法返回一个承诺。
没有代表评论这么张贴作为答案(对不起!)
如果你使用的是更新版本的bootstrap,你需要在前面添加uib-(像这样)
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">