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/… el 3 ago. 2016 a las 12:55
  • Estás usando bootstrap?
    – devconcept
    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. 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. 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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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