Question

Here is a plunker类似于我尝试做的事情。

我想为用户提供一个自动完成列表来过滤表格。

用户输入时过滤器工作正常，但如果用户从自动完成列表中选择一个选项，则过滤器会停止过滤。

例如......

the plunker显示了SO用户可以获得的30个徽章的列表。
我输入＆＃39; Au＆＃39;进入文本框;过滤器将列表缩减为两个徽章
按下向下箭头按钮，然后输入。
＆＃39;自传＆＃39;自动完成到文本框中，但列表仍显示两个项目

如何选择自动完成选项并让它过滤列表？

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
      var app = angular.module('app', []);

      app.factory('badges', ['$http', function($http) {
          return $http.get('https://api.stackexchange.com/2.2/badges?page=1&order=desc&sort=rank&site=stackoverflow')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
      }]);

      app.factory('badgesagain', ['$http', function($http) {
          return $http.get('https://api.stackexchange.com/2.2/badges?page=1&order=desc&sort=rank&site=stackoverflow')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
      }]);  

      app.controller('ctrl', ['$scope', 'badges', 'badgesagain', function($scope, badges, badgesagain){

          badgeNames = [];
          badges.then(function(response){

            for(var i=0; i < response.data.items.length; i++){
              badgeNames[i] = response.data.items[i].name;
            }

          });

          $scope.availableTags = badgeNames;
          $scope.complete = function () {
            console.log('running');
            $( "#tags" ).autocomplete({
              source: $scope.availableTags
            });
          };

          badges.success(function(data) {
            $scope.badgeList = data['items'];
          });

    }]);
  </script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" ng-keyup="complete()" ng-model="c.name"/>
    </div>
    <ol>
      <li ng-repeat="badge in badgeList | filter:c ">
        {{ badge.name }}
      </li>
    </ol>

  <body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" ng-keyup="complete()" ng-model="c.name"/>
    </div>
    <ol>
      <li ng-repeat="badge in badgeList | filter:c ">
        {{ badge.name }}
      </li>
    </ol>
  </body>
</html>
  </body>
</html>

Answer 1

混合角度和jquery会遇到麻烦。

考虑像allmighty-autocomplete这样的角度解决方案。

Answer 2

从长远来看，混合使用jQuery和angular是不理想的。您可能会遇到这样的问题，其中angular不知道jquery插件所做的更改。这就是为什么建议使用角度插件，例如angular-bootstrap typeahead component

但是，我们可以通过在选择项目后让角度知道来解决您的问题。我们可以使用jQuery自动完成的select回调来实现这一点。

见这个例子：

$scope.complete = function () {
  console.log('running');
  $( "#tags" ).autocomplete({
    source: $scope.availableTags,
    select : function(evt, ui) {
      $scope.$apply(function() {
        $scope.c.name = ui.item.value;
      });
    }
  });
};

Plnkr demo

使用自动完成中的选项过滤列表

2 个答案: