각 js 단위의 검색 상자

각 js 단위의 검색 상자

angularJs 어플리케이션에 검색창을 구현하고 싶습니다.사용자가 검색 상자에 이름을 입력하기 시작하면 바로 REST 서비스를 호출하고 검색 텍스트 상자에 입력한 이름과 일치하는 모든 이름을 가져와야 합니다.버튼이 없으므로 사용자가 입력을 시작하는 즉시 결과가 자동으로 나타납니다.REST 서비스는 이미 있습니다.사용자가 입력을 시작하면 REST 서비스를 호출하고 결과를 목록으로 반환하면 됩니다.예:- James를 입력하면 이름이 James로 시작하는 모든 사용자가 검색 상자에 목록으로 나타납니다.

이름 목록이 나타나면 이름 중 하나를 클릭하면 현재 페이지에 정보가 로드됩니다.

각진 js로 이러한 타이프온 검색창을 구현하려면 어떻게 해야 합니까?지시 사항이 있습니까?누구든 제게 방향을 좀 알려주실 수 있나요?

당신은 키 누름에 귀를 기울이는 지시문을 정의해야 합니다.

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()">   

컨트롤러

$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의 type ahead 지시가 존재할 수 있습니다. angular-ui type ahead가 도움이 되었으면 합니다.

이는 수락된 답변을 단순화한 것으로 나타났습니다.

// 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>

이 문제를 이미 해결했는지는 확실하지 않지만 이 자습서를 보는 것이 좋습니다. http://angular.github.io/angular-phonecat/step-12/app/ #/phones 근본적으로 관심 있는 작업을 수행하지만 대신 입력하는 동안 결과를 필터링합니다.만약 당신이 이 일을 했다면, 저는 당신이 어떻게 했는지에 관심이 있습니다.저도 해보고 있어요.

드라마, 디렉티브, 글리프토돈 피가 왜 이렇게 많아요?

각이 이미 있었으므로.

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
};

부트스트랩의 "Type ahead, Asynchronous results"는 원하는 대로 쉽게 실행할 수 있습니다.https://angular-ui.github.io/bootstrap/ 로 이동한 다음 페이지 맨 아래쪽으로 스크롤합니다.CRUDiest movies 데이터베이스 프로젝트에서 사용했습니다. https://crudiest-firebase.firebaseapp.com/ #/

언급URL : https://stackoverflow.com/questions/21891229/search-box-in-angular-js