Jak utworzyć wyszukiwanie w czasie rzeczywistym za pomocą angularjs

Question

Chcę utworzyć proste wyszukiwanie w czasie rzeczywistym po stronie klienta angularjs i po stronie serwera Java, chcę użyć podobnego efektu niż onKeyUp w domenie i ajax, ale w kanciastym js ,

<div ng-app="MyModule" ng-controller="MainCtrl">      
       <input class="form-control field span12" id="objctf" rows="4" ng-model="keywords" /> 
       <a href="/adminpanel?q=" class="btn btn-primary">Manage</a> 
       <div> 
        <p ng-show="loading">Loading...</p> 
        <p ng-hide="loading">Response: {{response}}</p> 
        <p ng-hide="loading">writed: {{keywords}}</p> 
       </div> 
    </div> 


var MainCtrl = function($scope, $http) { 

$scope.keywords = "debut"; 
alert ('en mode ajax '+$scope.keywords); 
$scope.response = $http.post('/api/member/getuser', { "username" : $scope.keywords }); 

};

Answer 1

dodawania ng-zmiana do wejścia tak:

<input class="form-control field span12" id="objctf" rows="4" ng-model="keywords" ng-change="search()" /> 

utworzyć metodę obsłużyć zmianę na kontrolerze:

myApp.controller('someCtrl', ['$scope', 'someService', function($scope, someService){  
    $scope.search = function(){ 
     someService.search($scope.keywords).then(function(response){ 
      $scope.response = response.data; 
     }); 
    }; 

}]); 

Wreszcie, stworzenie serwisu, aby wykonać połączenie do serwer:

myApp.service('someService', ['$http', function($http){ 
    return { 
     search: function(keywords){ 
      return $http.post('/api/member/getuser', { "username" : keywords }); 
     } 
    } 
}]); 

Postępując w ten sposób, zyskujesz metodę wielokrotnego użytku, której wynik ts można utrzymywać przez trasy, jeśli zajdzie taka potrzeba.

Answer 2

myApp.controller('someCtrl', ['$scope', 'someService', function($scope, someService){  
$scope.search = function(){ 
    someService.search($scope.keywords).success(function(response){ 
     $scope.response = response.data; 
    }).error(function(){ 
     console.log('error'); 
    }); 
};}]); 

Wymień .then przez .success i .error;) @jack