Tracking-Benutzer-Eingabe und bieten Word Completion-Winkel

Question

Ich bin neu in eckigen und ich brauche etwas Hilfe. Sagen wir, ich habe einen DB, der eine Liste von Zahlen enthält, und ich möchte diese Liste für die Wortvervollständigung verwenden.

nehme an, dies meine Form ist:

  <!-- FORM --> 
      <form> 

       <!-- CODE --> 
        <label>code</label> 
        <input type="text" name="codeInput" placeholder="please insert your code..." > 

       <!-- SUBMIT BUTTON --> 
       <button type="submit" >Submit 
       </button> 
     </form> 

auf den Benutzer setzt mindestens 5 Zeichen ich einen Ajax-Aufruf zu offers.php zu den Angeboten abrufen und anzeigen sie machen wollen.

zur Kenntnis, dass der Ajax-Aufruf ist, bevor das Formular

Der PHP-Code einreichen arbeitet ... Ich bin auf der Client-Seite fest.

Ich weiß, dass ich so etwas wie tun soll:

      $http({ 
         method : 'POST', 
         url  : 'offers.php', 
         data : $.param(code), 
         headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
         }) 
         .success(function(data) 
          { 
          //display the data somehow... 
         }); 

Ich kann einfach nicht herausfinden, wie alle Komponenten zu verbinden.

Answer 1

Auf OliverJ90 Antwort sollte es eine kleine Änderung sein. Tun Sie dies in Ihrem html:

<form> 
<!-- CODE --> 
    <label>code</label> 
    <input type="text" name="codeInput" placeholder="please insert your code..." ng-model="someValue" ng-change="myFunc()" > 
    <!-- SUBMIT BUTTON --> 
    <button type="submit" >Submit</button> 
</form> 

Und dann wird Ihr Javascript sein wie dieser

$scope.myFunc = function(){ 
    //Do the following if $scope.someValue.length >= 5 
    $http({ 
     method : 'POST', 
     url  : 'offers.php', 
     data : $scope.someValue, 
     headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
    }).success(function(data) { 
      //display the data somehow... 
    }); 
} 

Grundsätzlich somevalue Variable liefert eine Zwei-Wege-Datenbindung an Ihr Eingabefeld ein. Das heißt, wenn jemand den Wert im Textfeld ändert, ändert sich der Wert der Variablen, und wenn jemand den Variablenwert ändert, ändert sich der Wert des Eingabefeldes. Aus diesem Grund haben wir das ng-Modell verwendet. ng-change ist wie das Aufrufen einer Funktion für change-Ereignisse, aber dies wird von angular bereitgestellt.

Bitte beachten Sie, dass ng-change reuings ng-model, ohne die es nicht funktioniert.

Answer 2

Methode 1:

binden an das Eingangselement:

<input ng-model="yourValue"> 

Und in der Steuerung Uhr für die Änderungen am yourValue

$scope.$watch(yourValue, function() { 
    //check length and call your function that makes the http request. 
}); 

Methode 2:

Verwendung ng- Änderung

<input ng-change="checkValue()" ng-model="yourValue"> 

In Ihrem Controller:

$scope.checkValue = function() { 
    //do what you need to do. 
}