1

我想在我的用户在 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

1 回答 1

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）。

于 2013-09-17T05:34:52.170 回答