如何使用Angular UI Typeahead与Parse API

How to Use Angular UI Typeahead with Parse API?

本文关键字:Parse API Typeahead UI 何使用 Angular      更新时间:2023-09-26

我想通过使用Parse API从远程数据库获取结果来实现Typeahead(自动完成)功能,我已经尝试按照以下方式实现它,我正在获取JSON数组,但无法将其显示为下拉列表。。。以下是我的代码

HTML

<input type="text"
           ng-model="address.locality"
           placeholder="Locality"
           typeahead="locality for locality in getLocation($viewValue)"
           typeahead-min-length="3"
           typeahead-loading="isLoading"
           typeahead-no-results="noResults"
           class="form-control newAddressFields">
    <i ng-show="isLoading" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>

控制器

    $scope.noResults = false;
    $scope.localities = [];
    $scope.isLoading = false;
$scope.getLocation = function(val) {
        var filteredSearch= val.toLowerCase();
        var city_lw = $scope.address.city.toLowerCase();
       /* console.log(filteredSearch)*/;
        var Mapping = Parse.Object.extend("COD_Area_List");
        var localityQuery = new Parse.Query(Mapping);

        localityQuery.startsWith("Locality_sm",filteredSearch);
        localityQuery.equalTo("city_sm", city_lw);
        $scope.localities = [];
        $scope.isLoading = true;
        localityQuery.find({
            success: function(results) {
                $scope.isLoading = false;
                 console.log("Successfully retrieved " + results.length + " responses.");

                if(results.length > 0){
                    $scope.noResults = false;
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i].toJSON();
                        /*console.log(object);*/
                        $scope.localities.push(object.Locality);
                    }
                } else{
                    $scope.noResults = true;
                }
                console.log($scope.localities);
                //This has results showing but not in the dropdown below Typeahead
                return $scope.localities;
            },
            error: function(error) {
                // There was an error.
                $scope.isLoading = false;
            }
        });
    };

在HTML中,您使用了

typeahead="locality for locality in getLocation($viewValue)"

在Controller$scope.locales中,您有一个包含Objects的数组。。因此,您可以在下拉列表中查看"对象"。。

解决问题的方法是在HTML中使用对象的属性。。

假设您的locality对象看起来像这样={city:"some_city",state:"some_state"}

所以试试这个。。

typeahead="locality.city for locality in getLocation($viewValue)"