0

llevo unos dias queriendo solucionarlo, bien en mi vista utilizo un formulario con:

<input type="search" class="autocomplete"  ng-model="user_search.search" ng-keyup="user_search(user_search.search)" autocomplete="off" >

Bien nada extraño, para mi controlador uso una funcion de scope

$scope.user_search = function(value) {
     $scope.user_search ="";
    $http({
        method: 'POST',
        url: url_server + "user/user_search",
        data: { consulta: value }

    }).then(function successCallback(response) {
        console.log('this callback will be called asynchronously when the response is available');
        console.log(response.data);
        $scope.user_search = response.data;
    }, function errorCallback(response) {
        console.log('called asynchronously if an error occurs or server returns response with an error status.');
        console.log(response.data);
    });

el controlador funciona correctamente y la función se ejecuta al ingresar la primera letra (ng-keyup) , pero cuando ingreso la segunda letra de mi búsqueda me retorna este error

angular.js:15566 TypeError: v2.user_search is not a function
at fn (eval at compile (angular.js:16417), <anonymous>:2:268)
at callback (angular.js:28950)
at Scope.$eval (angular.js:19392)
at Scope.$apply (angular.js:19491)
at HTMLInputElement.<anonymous> (angular.js:28954)
at defaultHandlerWrapper (angular.js:3823)
at HTMLInputElement.eventHandler (angular.js:3811)

que quede claro que es en la segunda+ vez que se ejecuta la función ya que la primera vez trae los datos del servidor y funciona correctamente

por el momento no he sido capaz de solucionarlo agradecería si pudieran orientarme

1 respuesta 1

1

En la primera linea tienes

$scope.user_search = function(value) {

y en la segunda tienes

$scope.user_search ="";

Estas sobreescribiendo tu propia variable y usando el mismo nombre tanto para ng-model y para ng-keyup que requieren cosas distintas.

Sólo tienes que usar una variable distinta para la función de busqueda y el ng-model

<input type="search" class="autocomplete" ng-model="user_search" ng-keyup="search(user_search)" autocomplete="off" >

Y en el código

$scope.search = function(value) {
    $scope.user_search ="";
    $http({
        method: 'POST',
        url: url_server + "user/user_search",
        data: { consulta: value }
    }).then(function successCallback(response) {
        console.log('this callback will be called asynchronously when the response is available');
        console.log(response.data);
        $scope.user_search = response.data;
    }, function errorCallback(response) {
        console.log('called asynchronously if an error occurs or server returns response with an error status.');
        console.log(response.data);
    });
}

No deberías usar key-up para desencadenar llamadas http. Deberías usar debounce para que el valor se actualize luego de unos segundos y observar los updates al valor de ng-model para desencadenar las llamadas http.

2
  • buena respuesta hermano, agregaría tener esto ng-model-options="{ debounce: 1000 }" en el input search para evitar golpear al servidor en cada cambio
    – fredyfx
    Commented el 13 nov. 2019 a las 22:39
  • @fredyfx eso no tendrá efecto ya que de la forma que esta escrito la búsqueda se dispara en key-up así que si agregas eso sólo tendrás una búsqueda en cada tecla pero con un valor no actualizado. Sigue siendo valido aclararle eso al OP para que cambie el algoritmo. Gracias.
    – devconcept
    Commented el 13 nov. 2019 a las 22:42

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.