リモートデータソースとそのパフォーマンスの最適なアプローチによる角度材料設計オートコンプリート

Question

現在のプロジェクトでは、AJAXを介してデータを読み込んでいる角度材料のオートコンプリートを使用していますが、それを行う最良の方法を考えるのは本当に議論の余地があります。あなたは、私はオートコンプリートで、私のようなクエリでを使用してデータを取得しています、そのクエリ文字列に指定された検索テキスト（クエリ）を使用してデータを取得しています見ることができるように、すべての私のコードの拳は

$scope.loadOrganizations = function() { 
      var url = "index.php?option=com_crm&task=inquiry.loadOrganizations"; 
      send_data = JSON.stringify({"query": $scope.searchText}); 
      $http({ 
       method: "POST", 
       url: url, 
       dataType: "JSON", 
       data: send_data, 
       beforeSend: function (xhr) { 
        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); 
        xhr.setRequestHeader('Accept', 'application/json'); 
       } 
      }).then(function Success(response) { 
       $scope.errors = []; 
       if (response.data.state) { 
        $scope.organizations = response.data.results; 
       } else { 
        $scope.errors.push({ 
         index: $scope.errors.length, 
         error_description: "Something Went Wrong With Loading Existing Data. Please Try Again Later" 
        }); 
       } 

      }, function Error(response) { 
       console.log(response); 
      }); 
     }; 

     $scope.querySearch = function (query) { 
      $scope.loadOrganizations(); 
      var results = $scope.organizations; 
      //var results = query ? $scope.loadOrganizations() : $scope.loadOrganizations(); 
      return results; 
     }; 

以下に示します。サーバー側に送信し、データを返します。問題は、このアプローチではかなり遅いようです。オートコンプリートのために奇妙に見えるデータをロードするのに約250ms。私は、ユーザーがデータを読み込むのを待たせたくないので、これを行う最善の方法があるかどうかを知りたいと思います。あなたの提案には非常に明確にコードを与えるために十分親切にしてください。あらかじめ大変ありがとうございます。あなたが応答を待つ必要があるとして、サーバに要求を送信する

よろしく、 Nimanthaペレラ

Answer 1

は常にいくつかの遅延が発生します。そのような遅延が欲しくない場合は、オートコンプリートに何らかのデータキャッシングを使用する必要があります。私は、一番簡単な解決策は、すべての組織を一度ロードすることだと思います。コントローラの初期化時に、結果を$scope.querySearchにフィルタリングするだけです。ここで

は、私はこれを達成する方法の例です：

$scope.querySearch = function (query) { 
     var results = _arrayFilter($scope.organizations, function(item) { 
      return //condition, e.g. item.name.indexOf(query) > -1; 
     }); 

     return results; 
}; 

function _arrayFilter(array, predicate) { 
    var filteredArray = []; 

    for(var i = 0; i < array.length; i++) { 
     if(predicate(array[i])) { 
      filteredArray.push(array[i]); 
     } 
    } 

    return filteredArray; 
} 

function _initialize() { 
    $scope.loadOrganizations(); // This should load all organisations to $scope.organizations 
} 

_initialize();