AngularJS中json的自动完成文本框

Question

我只有 AngularJS 的基本经验。

这是一个 AngularJS 脚本，它可以从给定的国家列表中自动完成一个文本框。但我需要它从本地 Json 文件中读取数据。

完全搞糊涂了，因为我的 Json 文件包含嵌套的 Json 对象。 当我在文本框中搜索“AAL 或 Aalb”时，我需要将 AAL-AALBORG 列为列表。

有人可以简要解释一下我该怎么做吗？

<script>
    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope) {
        $scope.countryList = ["USA", "UK", "INDIA","KOREA"];
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country) {
                if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0)
                {
                    output.push(country);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });
</script>

HTML 是，

<div ng-app="myapp" ng-controller="usercontroller">
            <label>Enter a country</label>
            <input type="text" name="country" id="country" ng-model="country" ng-keyup="complete(country)" class="form-control"/>
        <ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
            <li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-click="fillTextbox(countrydata)" >{{countrydata}}</li>
        </ul>
        </div>

嵌套的Json格式为：

{"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}}

Answer 1

您可以使用 $http 服务。

$http.get('path_to_your_json_file').then(

 function success(data){
    $scope.myArray = data;
}

)

Answer 2

假设：

$scope.countryList = {"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}};

试试这个：

angular.forEach($scope.countryList, function (country, code) {
            if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0))
            {
                output.push(code +"-" +country.city);
            }
        });

Answer 3

Final Script as per suggestions, Thanks all :



    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope,$http) {
        $http.get('js/airport.json').then(
            function (response) {
                $scope.countryList = response.data;
            })
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country, code) {
                if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0)) {
                    output.push(code + "-" + country.city);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });

Answer 4

在你的组件初始化时，用这个数据填充一个数据数组，当用户在输入中写入时，例如使用 keyup 获取值。如果您的 autocompleteData 存在并且您的长度 > 0，那么您可以在输入下显示一个表格。

要过滤，我会使用类似的东西：

filter(company: Airline){ 
    this.companyTable.filter((company) => {
      return company.name.toLowerCase().indexOf(valueFilter.toLowerCase()) >= 0 
});

其中 company 是您的 companyTable 中的一家公司，并且 valueFilter 输入中的单词（您可以使用 DOM / ElementRef 访问，请参阅 doc）