Как связать angular -ui typeahead с сервером через $http для оптимизации на стороне сервера?

Пример typeahead (http://angular-ui.github.io/bootstrap/#/typeahead) позволяет легко реализовать задний конец этого автозаполнения, но не дает никакого примера. Меня интересует, в частности, поиск текущей введенной строки, чтобы я мог отправить ее на сервер и отправить уже отфильтрованный результат. Я бы хотел сделать эту оптимизацию на стороне сервера и свести к минимуму мои запросы, я не думаю, что вернусь весь набор результатов и исключение несогласованных элементов для отображения возможно для приложения с более чем 200 000 записей в базе данных.

Должен ли я в этом случае вообще забыть о typeahead и реализовать настраиваемое решение с выпадающим списком или есть ли способ сделать это легко?

Ответ 1

Есть способ реализовать это очень легко, не нужно развертывать свое собственное решение (по крайней мере, не для этого случая!). В принципе, вы можете использовать любую функцию как часть выражения typeaheads, например:

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

Как вы можете видеть из этого примера, можно вызвать метод getStates($viewValue) (определенный в области), а $viewValue соответствует значению, введенному пользователем.

Что лучше всего, так это то, что ваша функция может вернуть обещание, и это обещание будет правильно распознано с помощью typeahead.

Некоторое время назад я написал образец plunk, который показывает, как использовать вызовы на стороне сервера, чтобы обеспечить автоматическое заполнение. Проверьте этот фрагмент, который показывает автозаполнение для всех городов в США (на основе geobytes.com), где запросы по кварталам запрашиваются в реальном времени от службы JSONP:

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

Обратите внимание на рабочий пример того, как выполнять фильтрацию на стороне сервера (для просмотра результатов необходимо ввести не менее 3 символов). Конечно, вы не ограничены вызовами jsonp, вы можете использовать любой метод, который возвращает обещание.

Ответ 2

У вас нет комментариев для комментариев, поэтому отправляйте их в качестве ответа (извините!)

Если вы используете более новую версию bootstrap, вам нужно добавить uib- перед typeahead (например)

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