Поле поиска в angular js

Я хочу реализовать окно поиска в моем приложении angularJs. Как только пользователь начнет вводить какое-либо имя в окне поиска, необходимо вызвать некоторую службу REST и получить все имена, которые соответствуют имени, указанному в текстовом поле поиска. Обратите внимание, что кнопки нет, результат должен появиться автоматически, как только пользователь начнет вводить текст. Служба REST уже существует. Мне просто нужно вызвать службу REST, когда пользователь начнет вводить текст и возвращает результат в виде списка. Например: если я набираю Джеймса, тогда все пользователи, чье имя начинается с Джеймса, должны появиться в списке в списке.

Как только появится список имен, пользователь может нажать на одно из имен, и его информация должна быть загружена на текущей странице.

Как я могу реализовать такое поле поиска по типу в angular js? Есть ли для этого какая-либо директива? Может кто-нибудь, пожалуйста, дать мне какое-то направление.

Ответ 1

Вы должны определить директиву, которая будет прослушивать нажатие клавиши.

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
    })
}

Было бы хорошо подождать, пока не будет введено 3 ключа, для этого в директиве:

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

Возможно, существует директива typeahead из angular -ui, которую вы можете использовать: angular -ui typeahead Надеюсь, это поможет вам.

Ответ 2

Не уверен, что вы уже решили это, но я рекомендую посмотреть этот учебник: http://angular.github.io/angular-phonecat/step-12/app/#/phones По сути, он делает то, что вас интересует, но вместо этого отфильтровывает результаты при наборе текста. Если у вас это работает, меня интересует, как вы это сделали. Я тоже пытаюсь это сделать.

Ответ 3

Обнаружено, что это упрощение принятого ответа.

// 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>

Ответ 4

Почему так много драмы, директив и крови Глиптодона?

Поскольку angular уже имеет

ng-keypress
ng-keyup
ng-keydown

Используйте любой из них для вызова службы REST так же, как и с ng-click.

HTML

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

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

Ответ 5

Bootstrap "Typeahead, асинхронные результаты" делает именно то, что вы хотите, легко. Перейдите в https://angular-ui.github.io/bootstrap/, затем прокрутите вниз до нижней части страницы. Я использовал его в проекте моей CRUDiest базы данных видео: https://crudiest-firebase.firebaseapp.com/#/movies