각도 js의 검색 상자

Question

angularJs 애플리케이션에 검색 상자를 구현하고 싶습니다. 사용자가 검색 상자에 이름을 입력하자마자 일부 REST 서비스를 호출해야하며 검색 텍스트 상자에 입력 한 이름과 일치하는 모든 이름을 가져와야합니다. 단추가 없다는 점에 유의하십시오. 사용자가 입력을 시작하면 자동으로 결과가 나타납니다. REST 서비스가 이미 있습니다. 사용자가 입력을 시작하고 결과를 목록으로 반환 할 때 REST 서비스를 호출하기 만하면됩니다. 예 : - James라고 입력하면 James로 시작하는 모든 사용자가 검색 상자에 목록으로 나타납니다.

이름 목록이 나오면 사용자는 이름 중 하나를 클릭 할 수 있으며 그의 정보는 현재 페이지에로드되어야합니다.

어떻게 각도 j에 이러한 유형 검색 상자를 구현할 수 있습니까? 그것에 대한 지시가 있습니까? 누구든지 내게 어떤 방향을 주시겠습니까.

Answer 1

onkeypress를 수신하는 지시문을 정의해야합니다.

app.directive('myOnKeyDownCall', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) {    
       scope.$apply(function(){ 
        scope.$eval(attrs.ngEnter); 
       }); 
       event.preventDefault(); 
     }); 
    }; 
}); 

HTML

<input type="text" my-on-key-down-call="callRestService()"> 

CONTROLLER

$scope.callRestService= function() { 
    $http({method: 'GET', url: '/someUrl'}). 
    success(function(data, status, headers, config) { 
     $scope.results.push(data); //retrieve results and add to existing results 
    }) 
} 

3 키 때까지 기다릴 것이 좋을 것이다 지시문에 그것을 위해, 입력되었습니다

var numKeysPress=0; 
element.bind("keydown keypress", function (event) { 
     numKeysPress++; 
      if(numKeysPress>=3){ 
       scope.$apply(function(){ 
        scope.$eval(attrs.myOnKeyDownCall); 
       }); 
       event.preventDefault(); 
       } 
     }); 

angular-ui typeahead 을 당신이 이미이 문제를 해결하면 그것은 당신에게

Answer 2

확실하지

도움이되기를 바랍니다,하지만이 튜토리얼을보고 추천 : http://angular.github.io/angular-phonecat/step-12/app/#/phones은 본질적으로는 않습니다

아마, 당신이 사용할 수있는 각도-UI에서 선행 입력 지시 존재 관심있는 내용이 아니라 입력하는 동안 결과를 필터링합니다. 이게 효과가 있다면 어떻게했는지에 관심이 있습니다. 나는 이것을 시도하고있다.

Answer 3

허용 된 답변의 단순화로 판명되었습니다.

// Directive 
app.directive('search', function() { 
    return function ($scope, element) { 
     element.bind("keyup", function (event) { 
      var val = element.val(); 
      if(val.length > 2) { 
      $scope.search(val); 
      } 
     }); 
    }; 
}); 

// In Controller 
$scope.search= function(val) { 
    // fetch data 
} 

// HTML 
<input type="text" search> 

Answer 4

부트 스트랩의 "유형 비법, 비동기 결과"는 원하는대로 정확하게 수행합니다. https://angular-ui.github.io/bootstrap/으로 이동 한 다음 페이지 아래쪽으로 스크롤합니다. 내 CRUDiest 영화 데이터베이스 프로젝트에 사용 : https://crudiest-firebase.firebaseapp.com/#/movies

Answer 5

왜 그렇게 많은 드라마, 지시문 및 글리 포드 돈 피?각도 이후

이미

ng-keypress 
ng-keyup 
ng-keydown 

는 REST 서비스를 호출 그 중 하나를 사용이 그냥 당신 것 ng-click.

HTML

<input type="search" ng-model="vm.query" ng-keyup="vm.search()" /> 

JS

와

vm.search = search; 

function search() { 
    // Call your cool REST service and attach data to it 
    vm.data = MyCoolService.myGetFunctionWhatever(); 
    // You can use vm.query ng-model to limit search after 2 input values for example 
    //  if(vm.query.length > 2) do your magic 
};