Para hacer esto puedes asignar un modelo para el input de búsqueda y escuchar los cambios con ng-change
usando un retardo con $timeout
para darle tiempo al usuario que termine de ingresar su búsqueda, luego tomas ese valor para hacer la petición al servidor y por ultimo muestras N número de resultados en una lista. Aqui te dejo un ejemplo:
Template:
<input type="text" ng-model="textoBusqueda" ng-change="buscar(textoBusqueda)">
<span ng-show="cargando">Cargando...</span>
<div class="resultadosBusqueda">
<ul>
<li ng-repeat="sugerencia in results" ng-click="clienteSeleccionado = sugerencia">
{{ sugerancia.nombre }}
</li>
</ul>
</div>
<h2 ng-if="clienteSelecionado">
<Strong>Cliente Seleccionado: </Strong> {{ clienteSeleccionado.nombre }}
</h2>
Controller:
angular.module('app.clientes')
.controller('clientesCtrl', ['$scope', '$timeout', '$http',
function($scope, clientesService, $timeout, $http){
$scope.results = [];
$scope.cargando = false;
$scope.clienteSeleccionado = null;
var URL_CLIENTES = 'api/v1/clientes/';
// Autocompletado Busqueda
var timer = null;
$scope.buscar = function(val){
if(timer) $timeout.cancel(timer);
timer = $timeout(exc, 800); //800 milisegundos de retardo
function exc(){
console.log('buscando...');
$scope.getClientes(val);
}
}
// Llamada al servidor
$scope.getClientes = function(val){
$scope.cargando = true; //mostrar "cargando en la vista"
return $http.post(URL_CLIENTES+'?limit=10', { q: val}).then(function(response){
console.log(response);
$scope.results = response.data;
$scope.cargando = false;
});
};
}]);
Usando css puedes darle estilos a los ul>li
para que salga en forma pegados al inputs como opciones a completar.
ui-bootstrap
que está diseñado para angular y bootstrap viene con la directivatypeahead
que te puede servir para lo que quieres.