2013-09-17 2 views
1

Я хотел бы запустить поиск после того, как мой пользователь закончил писать (без ввода) в angularjs.пожар события после окончания записи в angularjs

Мой HTML (упрощенный):

<div ng-class="input-append" ng-controller="searchControl"> 
    <input type="text" ng-model="ajaxSearch" ng-change="search();"> 
</div> 

Мои AngularJs (упрощенный):

$scope.searchControl = function() {     
    $scope.search = function(){ 
    $http({ 
      method: 'POST', 
      url: '<?php echo base_url('system/ajax_search/') ?>', 
      'data: search=' + $scope.ajaxSearch, 
      headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
      } 
     }).success(function(data) { 
      $scope.result = data; 
     }); 
} 

Исходный код обширна, поэтому я упрощена. В моем коде я отправляю данные всегда, мой пользователь меняет поиск. Я бы хотел, чтобы данные после секунд перестали писать.

Любые идеи?

ответ

4

Это может быть легко достигнуто с помощью директивы:

angular.module('myApp', []) 
.directive('keyboardPoster', function($parse, $timeout){ 
    var DELAY_TIME_BEFORE_POSTING = 3000; 
    return function(scope, elem, attrs) { 
    var element = angular.element(elem)[0]; 
    var currentTimeout = null; 

    element.onkeypress = function() { 
     var model = $parse(attrs.postFunction); 
     var poster = model(scope); 
     if(currentTimeout) { 
     $timeout.cancel(currentTimeout) 
     } 
     currentTimeout = $timeout(function(){ 
     poster(); 
     }, DELAY_TIME_BEFORE_POSTING) 
    } 
    } 
}) 
.controller('testController', function($scope){ 
    $scope.search = function() { 
    console.log("Executing query..."); 
    } 
}) 

И он может быть использован, как это ...

<div ng-app='myApp' ng-controller='testController'> 
    <input type="text" keyboard-poster post-function="search"> 
</div> 

Использование $timeout и отменить каждый раз типы пользователей; если тайм-аут запускается, выполняет функцию области действия, заданную как attr. Вы можете изменить время задержки на все, что лучше подходит для вашего пользователя (я бы не отказался от него ниже 1000).

+1

просто небольшое обновление - вам нужно использовать 'element.onkeydown' вместо' element.onkeypress', если вы хотите обрабатывать backspace (очевидно, это необходимо почти всегда) –

Смежные вопросы