APIからデータを自動補完するためにangle-uiの先読みを使用しています

Question

APIからデータを取得するために角度UIの先読みを使用していますが、データセットが大きすぎてブラウザがかなりの時間ハングアップするという問題があります。 APIにはJSONデータのオブジェクトが20,000件近くあり、たとえば "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の自動補完候補をスクロールする必要はありません。