从http源angularjs中选择自动完成

时间:2016-08-06 14:29:50

标签: javascript angularjs

我正在处理自动填充文本框,我搜索并获得了此脚本

.controller('autoCompleteCTRL', function($scope, $rootScope){
    $rootScope.searchItems = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
    ];

    //Sort Array
    $rootScope.searchItems.sort();
    //Define Suggestions List
    $rootScope.suggestions = [];
    //Define Selected Suggestion Item
    $rootScope.selectedIndex = -1;

    //Function To Call On ng-change
    $rootScope.search = function(){
        $rootScope.suggestions = [];
        var myMaxSuggestionListLength = 0;
        for(var i=0; i<$rootScope.searchItems.length; i++){
            var searchItemsSmallLetters = angular.lowercase($rootScope.searchItems[i]);
            var searchTextSmallLetters = angular.lowercase($scope.searchText);
            if( searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1){
                $rootScope.suggestions.push(searchItemsSmallLetters);
                myMaxSuggestionListLength += 1;
                if(myMaxSuggestionListLength == 5){
                    break;
                }
            }
        }
    }

    //Keep Track Of Search Text Value During The Selection From The Suggestions List  
    $rootScope.$watch('selectedIndex',function(val){
        if(val !== -1) {
            $scope.searchText = $rootScope.suggestions[$rootScope.selectedIndex];
        }
    });


    //Text Field Events
    //Function To Call on ng-keydown
    $rootScope.checkKeyDown = function(event){
        if(event.keyCode === 40){//down key, increment selectedIndex
            event.preventDefault();
            if($rootScope.selectedIndex+1 !== $rootScope.suggestions.length){
                $rootScope.selectedIndex++;
            }
        }else if(event.keyCode === 38){ //up key, decrement selectedIndex
            event.preventDefault();
            if($rootScope.selectedIndex-1 !== -1){
                $rootScope.selectedIndex--;
            }
        }else if(event.keyCode === 13){ //enter key, empty suggestions array
            event.preventDefault();
            $rootScope.suggestions = [];
        }
    }
    //Function To Call on ng-keyup
    $rootScope.checkKeyUp = function(event){ 
        if(event.keyCode !== 8 || event.keyCode !== 46){//delete or backspace
            if($scope.searchText == ""){
                $rootScope.suggestions = [];
            }
        }
    }
    //======================================

    //List Item Events
    //Function To Call on ng-click
    $rootScope.AssignValueAndHide = function(index){
         $scope.searchText = $rootScope.suggestions[index];
         $rootScope.suggestions=[];
    }
    //======================================

});

但似乎搜索结果已经预先定义了Actionscript,Basic,C++等。我如何更改结果,我从http源中选择它,因为我有一个在json中的php文件?

1 个答案:

答案 0 :(得分:0)

您可以使用$ http $http 是用于从远程服务器读取数据的AngularJS服务

    .controller('autoCompleteCTRL', function($scope, $rootScope,$http){   

$http.get("json url")
        .then(function(response) {
              $rootScope.searchItems = response.data;
        });
    });