我正在使用angular-ui的預輸入來自動完成來自API的數據

Question

我正在使用角度UI的預輸入從API獲取數據，問題是數據集太大，導致瀏覽器掛起了相當長的時間。 該API具有大約20,000個JSON數據對象，例如，搜索“ p”將至少需要傳輸1.4 MB數據。 請幫助我解決問題。

UI代碼為：

<input type="text" class="form-control" ng-model="drug_name" ng-change="searchDrug()" placeholder="Search Drug" uib-typeahead="drug as drug.display_name for drug in drug_full_name" typeahead-loading="loadingRecipients" typeahead-no-results="noResults" />
                                    <i ng-show="loadingRecipients" class="glyphicon glyphicon-refresh"></i>
                                    <div ng-show="noResults">
                                        <i class="glyphicon glyphicon-remove"></i>No Results Found
                                    </div>

並且被觸發以搜索數據的函數是

$scope.searchDrug = function() {
        $scope.showSpinner = 1;

        var dataList = document.getElementById('alldrugs');
        //search drug from rxnorm database
        $http({

            method: 'POST',
            url: 'http://104.155.102.226:8033/getdrug/',
            data: {
                "brand_name":$scope.drug_name
            },
            headers: {
                'accept':'application/json',
                'Content-Type':'application/json'
            }

        }).success(function(data){
            console.log(data);
            for(var i = 0; i< data.length; i++) {
              $scope.drug_brand_name = data[i].display_name
            }
           var drug_full_name = data; 


           $scope.drug_full_name = data;


        }).error();

Answer 1

服務器上的API應該將它發送回的對象數量限制為合理的數量，例如10。您的用戶無需滾動瀏覽20000個自動完成建議。