Angular Material Design automatische Vervollständigung mit Ferndatenquelle und es ist Leistung vs bestem Ansatz

Question

ich eine Angular Material zum automatischen Vervollständigung in meinem aktuellen Projekt habe, die Daten über AJAX wird geladen und es ist wirklich umstritten für mich besten Weg, es zu tun, um herauszufinden. Fist of all meinen Code ist unten angegeben

$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; 
     }; 

Wie Sie erhalte ich Daten mit dem Suchtext (Query) gegeben in der die automatischen Vervollständigung und für das Query-String sehen kann ich bin immer Daten mit einer ähnlichen Abfrage in Serverseite und gibt die Daten zurück. Das Problem ist, dass es bei diesem Ansatz ziemlich langsam zu sein scheint. Ungefähr 250 ms, um Daten zu laden, die für eine automatische Vervollständigung ungerade erscheinen. Ich würde gerne wissen, ob es ein bester Weg, dies zu tun, wie ich will nicht Benutzer auf Daten warten machen geladen werden. Bitte seien Sie so nett, den Code für Ihren Vorschlag klar zu geben. Vielen Dank Ihnen allen im Voraus.

Grüße, Nimantha Perera

Answer 1

eine Anfrage an den Server gesendet wird immer einige Verzögerungen verursachen, wie Sie auf die Antwort zu warten. Wenn Sie nicht über solche Verzögerungen wollen, sollten Sie eine Art von Daten-Caching für die automatische Vervollständigung verwenden. Ich denke, die einfachste Lösung wäre, alle Organisationen einmal zu laden, z. am Regler-Initialisierung und dann filtern, dass nur die Ergebnisse in $scope.querySearch. Hier

ist ein Beispiel dafür, wie ich diese erreichen würde:

$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();