Cómo retrasar la búsqueda instantánea AngularJS?

UPDATE

Ahora es más fácil que nunca (Angular 1.3), simplemente agregue una opción de rebote en el modelo.

<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">

Émbolo actualizado:
http://plnkr.co/edit/4V13gK

Documentación sobre modelos de NG:
https://docs.angularjs.org/api/ng/directive/ngModelOptions

Método antiguo:

Aquí hay otro método sin dependencias más allá de angular.

Necesita establecer un tiempo de espera y comparar su actual cadena con la versión anterior, si ambas son iguales entonces realiza la búsqueda.

$scope.$watch('searchStr', function (tmpStr)
{
  if (!tmpStr || tmpStr.length == 0)
    return 0;
   $timeout(function() {

    // if searchStr is still the same..
    // go ahead and retrieve the data
    if (tmpStr === $scope.searchStr)
    {
      $http.get('//echo.jsontest.com/res/'+ tmpStr).success(function(data) {
        // update the textarea
        $scope.responseData = data.res; 
      });
    }
  }, 1000);
});

Y esto entra en tu punto de vista:

<input type="text" data-ng-model="searchStr">

<textarea> {{responseData}} </textarea>

El émbolo obligatorio: http://plnkr.co/dAPmwf

En Angular 1.3 haría esto:

HTML:

<input ng-model="msg" ng-model-options="{debounce: 1000}">

Controlador:

$scope.$watch('variableName', function(nVal, oVal) {
    if (nVal !== oVal) {
        myDebouncedFunction();
    }
});

Básicamente le estás diciendo a angular que ejecute myDebouncedFunction(), cuando la variable msg scope cambie. El atributo ng-model-options= " {debounce: 1000}" asegura que msg solo pueda actualizarse una vez por segundo.

 <input type="text"
    ng-model ="criteria.searchtext""  
    ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
    class="form-control" 
    placeholder="Search" >

Ahora podemos establecer ng-model-options debounce con el tiempo y cuando el desenfoque, el modelo debe cambiarse inmediatamente, de lo contrario al guardar tendrá un valor más antiguo si el retraso no se completa.

Rebotada / estrangulado actualizaciones de modelo para angularjs : http://jsfiddle.net/lgersman/vPsGb/3/

En su caso, no hay nada más que hacer que usar la directiva en el código jsfiddle de esta manera:

<input 
    id="searchText" 
    type="search" 
    placeholder="live search..." 
    ng-model="searchText" 
    ng-ampere-debounce
/>

Es básicamente una pequeña pieza de código que consiste en una sola directiva angular llamada "ng-ampere-debounce" utilizando http://benalman.com/projects/jquery-throttle-debounce-plugin / que se puede adjuntar a cualquier elemento dom. La directiva reordena el anexo controladores de eventos para que pueda controlar cuándo acelerar los eventos.

Se puede utilizar para la limitación/debouncing * actualizaciones angulares del modelo * controlador de eventos angular ng-[evento] * controladores de eventos de jquery

Echa un vistazo: http://jsfiddle.net/lgersman/vPsGb/3 /

La directiva formará parte del marco Orangevolt Ampere ( https://github.com/lgersman/jquery.orangevolt-ampere).

Para aquellos que usan keyup/keydown en el marcado HTML. Esto no usa reloj.

JS

app.controller('SearchCtrl', function ($scope, $http, $timeout) {
  var promise = '';
  $scope.search = function() {
    if(promise){
      $timeout.cancel(promise);
    }
    promise = $timeout(function() {
    //ajax call goes here..
    },2000);
  };
});

HTML

<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">

Solo para los usuarios redirigidos aquí:

Como se introdujo en Angular 1.3 puede usar ng-model-options atributo:

<input 
       id="searchText" 
       type="search" 
       placeholder="live search..." 
       ng-model="searchText"
       ng-model-options="{ debounce: 250 }"
/>

Creo que la mejor manera de resolver este problema es usando el plugin de Ben Alman jQuery throttle / debounce. En mi opinión, no hay necesidad de retrasar los eventos de cada campo en el formulario.

Simplemente envuelve tu scope scope.function función de manejo de reloj en $.debounce así:

$scope.$watch("searchText", $.debounce(1000, function() {
    console.log($scope.searchText);
}), true);

Otra solución es agregar una funcionalidad de retardo a la actualización del modelo. La simple directiva parece hacer un truco:

app.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {

            element.val(scope.model);

            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });

            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});

Uso:

<input delayed-model="searchText" data-delay="500" id="searchText" type="search" placeholder="live search..." />

Así que simplemente usa delayed-model en lugar de ng-model y define el data-delay deseado.

Demo: http://plnkr.co/edit/OmB4C3jtUD2Wjq5kzTSU?p=preview

Resolví este problema con una directiva que básicamente lo que hace es enlazar el modelo ng real en un atributo especial que observo en la directiva, luego utilizando un servicio de debounce actualizo mi atributo de directiva, para que el usuario observe la variable que enlaza a debounce-model en lugar de ng-model.

.directive('debounceDelay', function ($compile, $debounce) {
return {
  replace: false,
  scope: {
    debounceModel: '='
  },
  link: function (scope, element, attr) {
    var delay= attr.debounceDelay;
    var applyFunc = function () {
      scope.debounceModel = scope.model;
    }
    scope.model = scope.debounceModel;
    scope.$watch('model', function(){
      $debounce(applyFunc, delay);
    });
    attr.$set('ngModel', 'model');
    element.removeAttr('debounce-delay'); // so the next $compile won't run it again!

   $compile(element)(scope);
  }
};
});

Uso:

<input type="text" debounce-delay="1000" debounce-model="search"></input>

Y en el controlador :

    $scope.search = "";
    $scope.$watch('search', function (newVal, oldVal) {
      if(newVal === oldVal){
        return;
      }else{ //do something meaningful }

Demo en jsfiddle: http://jsfiddle.net/6K7Kd/37/

El servicio deb debounce se puede encontrar aquí: http://jsfiddle.net/Warspawn/6K7Kd/

Inspirado en eventuallyBind directiva http://jsfiddle.net/fctZH/12 /

Angular 1.3 tendrá opciones ng-model-debounce, pero hasta entonces, tienes que usar un temporizador como dijo Josué Ibarra. Sin embargo, en su código lanza un temporizador en cada pulsación de tecla. Además, está usando setTimeout, cuando en Angular uno tiene que usar tim timeout o use apply apply al final de setTimeout.