Реализовать автозаполнение с помощью пользовательской директивы в angularjs - PullRequest
Новая
       29

Реализовать автозаполнение с помощью пользовательской директивы в angularjs

0 голосов
/ 05 сентября 2018

Я попытался реализовать пользовательскую директиву и отобразить ее в неупорядоченном списке, но массив, который должен содержать отфильтрованные имена, не смог этого сделать. Вот моя директива Мне нужно отфильтровать входные данные и получить все совпадающие имена из моего основного массива 

app.directive('autoComplete', function() {     
    function link(scope, iElement, iAttrs,modelCtrl) {              
        //click event handling
        scope.fillTextbox = function(name){ 
            //modelCtrl.$setViewValue(name);
            //scope.filtered = scope[iAttrs.uiItems].filter(function(item){
            //return item.includes(inputValue);
            //      });
        }
        iElement.bind("keydown", function (event) {
            if(!scope.filtered.length){
                return;
            }               
            if(event.which == 38){                      //keyup
                if(scope.focusIndex > 0){
                    scope.$apply(function (){
                        scope.focusIndex-= 1;
                        scope.selected = scope.filtered[scope.focusIndex]; ////

                    });

                }else{event.preventDefault();}
                return;
            }else if(event.which == 40){                        //keydown
                if(scope.focusIndex < scope.filtered.length-1){
                    scope.$apply(function (){
                        scope.focusIndex+=1;
                        scope.selected = scope.filtered[scope.focusIndex]; ///
                    }); 
                }else{event.preventDefault();}
            }
            else if(event.which == 13){                     //enter                 
                scope.$apply(function (){
                    scope.selected = scope.filtered[scope.focusIndex];
                    console.log(scope.filtered[scope.focusIndex]);
                    scope.focusIndex = 0;
                    scope.filtered = [];
                });
            }
        });    
    }
    return {
        restrict: 'A',
        template :`<ul ng-model="listofnames" ng-show="true">
                       <li  class="list-group-item"
                            ng-repeat="name in filtered"
                            ng-click="fillTextbox(name)">{{name}}
                       </li>
                   </ul>`,
        require: 'ngModel',
        scope : {filtered : '='},
        link : link
    }  
});

Вот мой контроллер. Функция changeInText () не работает, и имена не фильтруются из массива имен. 

app.controller("DefaultCtrl",["$scope" , function($scope){
    $scope.names = ["john", "john1", "john2", "john3", "bill", "charlie",
        "robert", "alban", "oscar", "marie", "celine", "brad", "drew",
        "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", 
        "alfred", "gerard", "louis", "albert",
        "edouard", "benoit", "guillaume", "joseph"];
    $scope.foundname = [];
    $scope.filtered = [];
    $scope.focusIndex = 0;  
    $scope.changeInText = function (){
        for(var i = 0; i< $scope.names.length ; i++){
            if($scope.names[i].includes($scope.selected)){
                $scope.filtered.push($scope.names[i]);
            }   
        }
        console.log($scope.filtered);
        $scope.filtered=[];                 
    }
}]);
...