Suchfeld in eckigen js

Question

Ich möchte ein Suchfeld in meiner angularJs-Anwendung implementieren. Sobald der Benutzer beginnt, einen Namen in das Suchfeld einzugeben, sollte ein bestimmter REST-Dienst aufgerufen werden, der alle Namen abrufen soll, die mit dem eingegebenen Namen im Suchfeld übereinstimmen. Beachten Sie, dass keine Schaltfläche vorhanden ist. Das Ergebnis sollte automatisch angezeigt werden, sobald der Benutzer mit der Eingabe beginnt. Der REST-Service ist bereits vorhanden. Ich muss nur den REST-Service aufrufen, wenn der Benutzer mit der Eingabe beginnt und das Ergebnis als Liste zurückgibt. Zum Beispiel: - Wenn ich James eintippe, sollte der Benutzer, dessen Name mit James beginnt, als Liste in das Suchfeld kommen.

Sobald die Liste der Namen kommt, kann der Benutzer auf einen der Namen klicken und seine Informationen sollten auf der aktuellen Seite geladen werden.

Wie kann ich solche Typ-on-Suchfeld in angular js implementieren? Gibt es eine Richtlinie dafür? Kann mir bitte jemand eine Richtung geben.

Answer 1

Sie sollten eine Direktive definieren, die onkeypress zuhört.

app.directive('myOnKeyDownCall', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) {    
       scope.$apply(function(){ 
        scope.$eval(attrs.ngEnter); 
       }); 
       event.preventDefault(); 
     }); 
    }; 
}); 

HTML

<input type="text" my-on-key-down-call="callRestService()"> 

CONTROLLER

$scope.callRestService= function() { 
    $http({method: 'GET', url: '/someUrl'}). 
    success(function(data, status, headers, config) { 
     $scope.results.push(data); //retrieve results and add to existing results 
    }) 
} 

Wäre schön, bis 3 Schlüssel warten hat eingegeben worden ist, für die in der Richtlinie:

var numKeysPress=0; 
element.bind("keydown keypress", function (event) { 
     numKeysPress++; 
      if(numKeysPress>=3){ 
       scope.$apply(function(){ 
        scope.$eval(attrs.myOnKeyDownCall); 
       }); 
       event.preventDefault(); 
       } 
     }); 

Vielleicht

existiert typeahead-Richtlinie von Winkel-ui, die Sie verwenden können: angular-ui typeahead Ich hoffe, es hilft Ihnen

Answer 2

nicht sicher, ob Sie dies bereits gelöst, aber ich empfehlen, in diesem Tutorial suchen: http://angular.github.io/angular-phonecat/step-12/app/#/phones Im Grunde tut es was Sie interessiert, aber stattdessen filtert es die Ergebnisse beim Tippen. Wenn du das funktioniert hast, interessiert mich, wie du es gemacht hast. Ich versuche das auch.

Answer 3

Gefunden, dass dies eine Vereinfachung der akzeptierten Antwort ist.

// Directive 
app.directive('search', function() { 
    return function ($scope, element) { 
     element.bind("keyup", function (event) { 
      var val = element.val(); 
      if(val.length > 2) { 
      $scope.search(val); 
      } 
     }); 
    }; 
}); 

// In Controller 
$scope.search= function(val) { 
    // fetch data 
} 

// HTML 
<input type="text" search> 

Answer 4

Bootstrap's "Typehead, Asynchronous Ergebnisse" macht genau das, was Sie wollen, einfach. Gehen Sie zu https://angular-ui.github.io/bootstrap/ und scrollen Sie dann bis zum Ende der Seite. Ich benutzte es in meinem CRUDiest-Film-Datenbank-Projekt: https://crudiest-firebase.firebaseapp.com/#/movies

Answer 5

Warum so viel Drama, Direktiven und Glyptodon Blut?

Da Winkel bereits

ng-keypress 
ng-keyup 
ng-keydown 

alle diejenigen verwenden REST Dienst aufzurufen so wie man es mit ng-click.

HTML

<input type="search" ng-model="vm.query" ng-keyup="vm.search()" /> 

JS

vm.search = search; 

function search() { 
    // Call your cool REST service and attach data to it 
    vm.data = MyCoolService.myGetFunctionWhatever(); 
    // You can use vm.query ng-model to limit search after 2 input values for example 
    //  if(vm.query.length > 2) do your magic 
};