3

Quiero implementar un autoCompletado utilizando una llamada Ajax por ejemplo:

this.getCliente = function(data){
    return $http.post(UrlobtenerDatosUsuario,data);
 }

el cual retorna un Json segun los parametros que envie. Ahora una vez obtenida la data realizar la busqueda utilizando autocompletado a partir de 3 digito.

alguien por favor puede ayudarme dandome algun guia?

6
  • Esto te podría ayudar grabthiscode.com/programacion/… Commented el 3 ago. 2016 a las 12:55
  • Estás usando bootstrap?
    – devconcept
    Commented el 3 ago. 2016 a las 13:56
  • No, es puro AngularJs algo de Jquery para el HTML y CSS, lo que pasa es que ya tengo los html Maquetados y tengo que ver la implementación del autocompleted y no malograr el diseño ya predefinido. Commented el 3 ago. 2016 a las 15:32
  • el maquetado vino con este jquery: <script src="assets/js/third-party/jquery.autocomplete.js"></script> que lo utiliza para autocompleted pero al hacer la parte del angular no lo puedo reutilizar. Commented el 3 ago. 2016 a las 15:37
  • La pregunta es porque ui-bootstrap que está diseñado para angular y bootstrap viene con la directiva typeahead que te puede servir para lo que quieres.
    – devconcept
    Commented el 3 ago. 2016 a las 15:46

1 respuesta 1

2

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.