AngularJS와 - 작동하지 인스턴트 검색

나는 다음과 같은 코드가 있습니다AngularJS와 - 작동하지 인스턴트 검색

HTML :

<input type="text" ng-keyup="$event.keyCode == 13 ? searchCandidate() : null" ng-model="keyword" id="nav-third-input" placeholder="Rechercher" style="font-style:italic;color: #183046;letter-spacing: 1px;width: 90%; background-color: transparent;"> 

<div class="list-prio-content-ul"> 
<p ng-if="data.length==0 && searching"> No result</p> 
<!--RESULTS --> 
<div ng-repeat="item in data track by $index | searchFor:keyword"> 
    <div class="col-md-4 col-sm-4 list-prio-content-bgc"> 
     <a href="/userprofile/[[item.id]]"> 
      <div class="list-prio-content-div"> 

       <div class="list-img"> 
        <div ng-if="item.avatarPath"> 
         <img src="/uploads/avatars/[[item.getAvatarPath()]]"> 
        </div> 
        <div ng-if="!item.avatarPath" style="width: 100%;"> 
         <span class="initials">[[item.firstname.charAt(0) | uppercase ]][[item.lastname.charAt(0) | uppercase]]</span> 
        </div> 
       </div> 
       <div class="list-prio-content-txt"> 
        <div class="list-prio-content-name-ul"> 
         <p> 
          <span> [[item.firstname]]</span> 
          <strong>[[item.lastname | uppercase]]</span></strong> 
         </p> 
        </div> 
       </div> 
      </div> 
     </a> 
    </div> 
</div>

JS :

app.filter('searchFor', function(){ 
    return function(arr, keyword){ 
     if(!keyword){ 
      return arr; 
     } 
     var result = []; 
     keyword = keyword.toLowerCase(); 
     angular.forEach(arr, function(item){ 
      if(item.firstname.toLowerCase().indexOf(keyword) !== -1){ 
       result.push(item); 
      } 
     }); 
     return result; 
    }; 
}); 

app.controller('recherche', function ($scope, $http) { 
    $scope.data = []; 
    $scope.searching = false; 

    $scope.orderByMe = function(x) { 
     $scope.myOrderBy = x; 
    } 

    $scope.searchCandidate =() => { 
     if ($scope.keyword === '') { 
      $scope.data = []; 
      $scope.searching = false; 
      return; 
     } 
     else { 
      $scope.searching = true; 
      $http.get("search/" + $scope.keyword) 
       .then(function (response) { 
        $scope.data = response.data; 
       }) 
     } 
    } 
});

이 내가 AngularJS와를 처음 사용할 때입니다. 내 검색은 "ENTER"키를 누를 때 작동하지만, 내가 원하는 것은 다음과 같은 링크가 순식간에 검색된다는 것입니다. CodePen

누군가이 문제를 해결하도록 도와 줄 수 있습니까?

나는 당신은 필터링이 실시간으로 발생 싶어, 나는 그것이 올바른 받았다면

출처

2017-10-31 Dax

그런 다음 ng-keyup을 사용하지 않고 Enter 키가 이벤트를 트리거 한 키인지 확인하십시오. 변경 사용. –

사용 ng-change 대신 ng-keyup의

<input type="text" ng-change="searchCandidate()" ng-model="keyword" id="nav-third-input" placeholder="Rechercher" style="font-style:italic;color: #183046;letter-spacing: 1px;width: 90%; background-color: transparent;">

출처

2017-10-31 07:12:28 jitender

에 코드를 변경 사전에 감사합니다, 즉 같은 때와 사용자가 키워드를 입력합니다. , 컨트롤러에서

<input type="text" ng-change="filterFunction(keyword)" ng-model="keyword" id="nav-third-input" placeholder="Rechercher" style="font-style:italic;color: #183046;letter-spacing: 1px;width: 90%; background-color: transparent;">

현재 키워드를 가져 오기와 같은 필터링을 호출합니다 : 당신은 같은 ng-change에 함수를 호출하여 그것을 할 수

$scope.filterFunction = function(keyword) { 
      // http call here and set the filtered values 
      $http.get("search/" + keyword) 
       .then(function (response) { 
        $scope.data = response.data; 
      }); 
    }

이 시도하고 저희에게 알려주십시오 이것이 효과가 있다면.

출처

2017-10-31 07:13:11

AngularJS와 - 작동하지 인스턴트 검색

답변

관련 문제