如何通过 $http 将 angular-ui 的 typeahead 与服务器绑定以进行服务器端优化? [英] How to tie angular-ui's typeahead with a server via $http for server side optimization?
问题描述
提前输入示例 (http://angular-ui.github.io/bootstrap/#/typeahead) 提到在此自动完成中实现后端很容易，但没有提供示例.我特别感兴趣的是找出当前输入的字符串，以便我可以将 那个 发送到服务器并发回已经过滤的结果 - 我想在服务器端进行此优化并最小化我的查询，我认为对于数据库中有超过 200,000 个条目的应用程序，返回整个结果集并仅排除不匹配的项目进行显示是可行的.
The typeahead example (http://angular-ui.github.io/bootstrap/#/typeahead) mentions it's easy to implement a back end into this autocomplete, but provides no example. What interests me in particular is finding out the currently entered string so that I can send that to the server and send back an already filtered result - I would like to do this optimization server-side and minimize my queries, I don't think returning the whole result set and just excluding non-matching items for display is feasible for an app that has over 200,000 entries in the database.
在这种情况下，我应该完全忘记预先输入并使用下拉菜单实现自定义解决方案，还是有一种方法可以轻松做到这一点?
Should I, in this case, forget about typeahead altogether and implement a custom solution with a dropdown, or is there a way to do this easily?
推荐答案
有一种方法可以非常轻松地实现这一点，无需推出您的自定义解决方案(至少对于这种情况不是这样！).基本上你可以使用任何函数作为 typeaheads 表达式的一部分，例如:
There is a way to implement this very easily, no need to roll out your custom solution (at least not for this case!). Basically you can use any function as part of the typeaheads expression, ex.:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
正如你从这个例子中看到的，可以调用 getStates($viewValue) 方法(在范围上定义)，并且 $viewValue 对应于输入的值一个用户.
As you can see from this example the getStates($viewValue) method (defined on a scope) can be called and the $viewValue corresponds to a value entered by a user.
这里最好的是你的函数可以返回一个promise，并且这个promise会被typeahead正确识别.
What is the best here is that your function can return a promise and this promise will be correctly recognized by the typeahead.
前段时间我写了一个示例 plunk，展示了如何使用服务器端调用来提供自动完成.检查这个显示美国所有城市自动完成的插件(基于 geobytes.com)，其中城市是从 JSONP 服务实时查询的:
Some time ago I've written a sample plunk that shows how to use server-side calls to provide auto-complete. Check this plunk that shows autocomplete for all the cities in US (based on geobytes.com), where cities are queried live from a JSONP service:
http://plnkr.co/edit/t1neIS?p=preview
查看有关如何在服务器端进行过滤的工作示例(您需要至少输入 3 个字符才能查看结果).当然你不限于 jsonp 调用，你可以使用任何返回承诺的方法.
Check it out for a working example on how to do filtering on the server side (you need to type at least 3 characters to see results). Of course you are not limited to jsonp calls, you can use any method returning a promise.
这篇关于如何通过 $http 将 angular-ui 的 typeahead 与服务器绑定以进行服务器端优化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
