Question

我想在angularJs应用程序中实现一个搜索框。一旦用户开始在搜索框中键入一些名称，就应该调用一些REST服务，它应该获取与搜索文本框中键入的名称相匹配的所有名称。请注意，没有按钮，一旦用户开始输入，结果就会自动出现。 REST服务已经存在。我只需要在用户开始输入时调用REST服务并将结果作为列表返回。例如： - 如果我输入James，那么名字以James开头的所有用户都应该作为搜索框中的列表。

一旦名称列表出现，用户可以点击其中一个名称，他的信息应该加载到当前页面中。

如何在角度js中实现这种类型化的搜索框？对它有任何指示吗？任何人都可以给我一些指导。

Answer 1

您应该定义一个监听onkeypress的指令。

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

也许，你可以使用来自angular-ui的typeahead指令： angular-ui typeahead 我希望它可以帮到你

Answer 2

发现这是对已接受答案的简化。

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

不确定您是否已经解决了这个问题，但我建议您查看本教程：http://angular.github.io/angular-phonecat/step-12/app/#/phones 基本上它会做你感兴趣的事情，但它会在打字时过滤掉结果。如果你有这个工作，我对你是怎么做的感兴趣。我也尝试过这个。

Answer 4

为什么这么多戏剧，指令和血吸虫血液？

因为角度已经

ng-keypress
ng-keyup
ng-keydown

使用其中任何一个来调用REST服务，就像使用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
};

Answer 5

Bootstrap＆＃34; Typeahead，Asynchronous results＆＃34;很容易就能做到你想要的。转到https://angular-ui.github.io/bootstrap/，然后向下滚动到页面底部附近。我在我的CRUDiest电影数据库项目中使用它：https://crudiest-firebase.firebaseapp.com/#/movies

角度js中的搜索框

5 个答案: