Question

我有以下代码：

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

有人可以帮我解决这个问题吗？

我提前感谢你

Answer 1

使用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;">

Answer 2

如果我弄错了，你希望过滤实时发生，即当用户输入关键字时。您可以通过在ng-change上调用您的函数来完成此操作，例如：

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

在您的控制器中，获取当前关键字并进行过滤调用，如：

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

试试这个并告诉我们这是否适合您。

Angularjs - 即时搜索不起作用

2 个答案: