web-dev-qa-db-ger.com

Angularjs Autocomplete von $ http

Ich versuche, eine Autocomplete-Direktive zu schreiben, die Daten mithilfe einer $ http-Anfrage vom Server abruft (ohne externe Plugins oder Skripts). Derzeit funktioniert es nur mit statischen Daten. Jetzt weiß ich, dass ich meine $ http-Anfrage in den source: der Direktive einfügen muss, aber ich kann keine gute Dokumentation zu diesem Thema finden.

http-Anfrage

$http.post($scope.url, { "command": "list category() names"}). 
            success(function(data, status) {
                $scope.status = status;
                $scope.names = data;    
            })
            .
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;   
            });

Richtlinie

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
        };
    });

Aussicht

<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">

Also, wie kann ich das alles richtig zusammenfügen? 

angularjsautocompletedirectiveangular-http
59
Gidon

Ich habe eine Autocomplete-Direktive erstellt und sie in GitHub hochgeladen. Es sollte auch in der Lage sein, Daten von einem HTTP-Request zu verarbeiten.

Hier ist die Demo: http://justgoscha.github.io/allmighty-autocomplete/ .__ Und hier die Dokumentation und das Repository: https://github.com/JustGoscha/allmighty-autocomplete

Im Grunde müssen Sie eine promise zurückgeben, wenn Sie Daten von einer HTTP-Anforderung abrufen möchten, die beim Laden der Daten aufgelöst wird. Daher müssen Sie den $qservice/direct/controller dort eingeben, wo Sie Ihre HTTP-Anfrage ausgeben.

Beispiel: 

function getMyHttpData(){
  var deferred = $q.defer();
  $http.jsonp(request).success(function(data){
    // the promise gets resolved with the data from HTTP
    deferred.resolve(data);
  });
  // return the promise
  return deferred.promise;
}

Ich hoffe das hilft.

44
JustGoscha

Verwenden Sie den typeehead von angle-ui-bootstrap.

Es hatte eine großartige Unterstützung für $ http und verspricht . Außerdem enthält es keinerlei JQuery, reines AngularJS.

(Ich ziehe es vor, vorhandene Bibliotheken zu verwenden und wenn etwas fehlt, um ein Problem zu öffnen oder einen Pull-Auftrag zu erstellen, ist es besser, ein neues zu erstellen.)

35
Urigo

Sie müssen einen Controller mit ng-change-Funktion im Gültigkeitsbereich schreiben. In ng-change callback rufen Sie den Server auf und aktualisieren den Abschluss. Hier ist ein Stub (ohne $http da dies ein Plunk ist):

HTML

<!doctype html>
<html ng-app="plunker">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <div class='container-fluid' ng-controller="TypeaheadCtrl">
            <pre>Model: {{selected| json}}</pre>
            <pre>{{states}}</pre>
            <input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
        </div>
    </body>
</html>

JS

angular.module('plunker', ['ui.bootstrap']);

function TypeaheadCtrl($scope) {
  $scope.selected = undefined;
  $scope.states = [];

  $scope.onedit = function(){
    $scope.states = [];

    for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){
      var value = "";

      for(var j = 0; j < i; j++){
        value += j;
      }
      $scope.states.Push(value);
    }
  }
}
16
madhead

der einfachste Weg, dies in eckigen oder eckigen js ohne externe Module oder Direktiven zu tun, ist die Verwendung von list5 und datalist HTML5. Sie erhalten nur einen Json und verwenden ng-repeat, um die Optionen in datalist einzuziehen. Den Json könnt ihr von Ajax holen.

in diesem Beispiel:

  • ctrl.query ist die Abfrage, die Sie bei der Eingabe eingeben.
  • ctrl.msg ist die Nachricht, die im Platzhalter angezeigt wird
  • ctrl.dataList ist der abgerufene Json 

dann können sie filter und orderby im ng-reapet hinzufügen

!! list und datalist id müssen den gleichen namen haben !!

 <input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}>
<datalist id="autocompleList">
        <option ng-repeat="Ids in ctrl.dataList value={{Ids}}  >
</datalist>

UPDATE: ist natives HTML5, aber seien Sie vorsichtig mit dem Typ Browser und Version. check it out: https://caniuse.com/#search=datalist . 

4
londox

Ich fand diesen Link hilfreich 

$scope.loadSkillTags = function (query) {
var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
   return response.data;
  });
 };
0
Joe B