angularjs - bootstrap - ¿Cómo vincular typeahead de angular-ui con un servidor a través de $ http para la optimización del servidor?
autocomplete angularjs bootstrap (2)
Hay una manera de implementar esto muy fácilmente, no es necesario implementar su solución personalizada (¡al menos no para este caso!). Básicamente puedes usar cualquier función como parte de la expresión typeaheads, ej .:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
Como se puede ver en este ejemplo, se getStates($viewValue) método getStates($viewValue) (definido en un ámbito) y $viewValue corresponde a un valor ingresado por un usuario.
Lo que es mejor aquí es que su función puede devolver una promesa y esta promesa será correctamente reconocida por la cabeza de tortuga.
Hace algún tiempo escribí un ejemplo de muestra que muestra cómo usar las llamadas del lado del servidor para proporcionar el autocompletado. Verifique este plunk que muestra autocompletar para todas las ciudades de EE. UU. (Basado en geobytes.com), donde las ciudades se consultan en vivo desde un servicio JSONP:
http://plnkr.co/edit/t1neIS?p=preview
Compruébelo para ver un ejemplo de trabajo sobre cómo filtrar en el lado del servidor (debe escribir al menos 3 caracteres para ver los resultados). Por supuesto que no está limitado a las llamadas jsonp, puede usar cualquier método que devuelva una promesa.
El ejemplo typeahead ( http://angular-ui.github.io/bootstrap/#/typeahead ) menciona que es fácil implementar un back end en esta autocompletar, pero no proporciona ningún ejemplo. Lo que me interesa en particular es encontrar la cadena actualmente ingresada para poder enviarla al servidor y devolver un resultado ya filtrado. Me gustaría hacer esta optimización en el servidor y minimizar mis consultas. No creo que regresemos. todo el conjunto de resultados y la exclusión de elementos que no coinciden para su visualización es factible para una aplicación que tiene más de 200,000 entradas en la base de datos.
¿Debería, en este caso, olvidarme por completo del testaferro e implementar una solución personalizada con un menú desplegable, o hay una manera de hacerlo fácilmente?
No haga que el representante haga comentarios, publíquelo como una respuesta (¡lo siento!)
Si está utilizando una versión más nueva de bootstrap, debe agregar uib- delante de typeahead (como ese)
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">