angularjs - 如何通过 $http 将 angular-ui 的 typeahead 与服务器绑定(bind)以进行服务器端优化?

标签 angularjs angular-ui

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

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

最佳答案

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

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

正如您从这个示例中看到的,可以调用 getStates($viewValue) 方法(在范围上定义),并且 $viewValue 对应于由一个用户。

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

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

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

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

关于angularjs - 如何通过 $http 将 angular-ui 的 typeahead 与服务器绑定(bind)以进行服务器端优化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15930339/

相关文章:

angular-ui - UI-路由器 : Change url without loading state or defer loading the state?

angularjs - 模拟 $httpBackend 正则表达式不匹配

javascript - 使用分组时如何在 AngularJS ui-grid 中进行过滤?

javascript - 使用 Angular 添加事件状态到列表项

angularjs - Angular,从函数输出到表达式

javascript - 如何使用 Angular UI Router 设置默认 subview

javascript - Angular 用户界面选择 : Change theme

javascript - 如何导入模块并以 Angular 显示在 View 上?

javascript - AngularJS 中的 View 未更新

javascript - 通过 Angular UI 模式更新复杂模型时遇到问题