使用自动完成功能中的选择来筛选列表

Use a selection from an auto-complete to filter a list

本文关键字：选择 筛选 列表 功能 成功      更新时间：2023-09-26

这是一个类似于我想做的活塞。

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

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

例如…

  • 柱塞显示了一个SO用户可以获得的30个徽章列表。
  • 我在文本框中键入'Au';过滤器将列表减少到两个徽章

  • 我按下向下箭头键，然后输入。

  • 'Autobiographer'是自动填入文本框的，但是列表仍然显示两个项目

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

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

混合使用angular和jquery是自找麻烦。

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

从长远来看，混合使用jQuery和angular并不理想。你很可能会遇到这样的问题，angular不知道jquery插件所做的更改。这就是为什么推荐使用angular插件，比如angular-bootstrap typeahead component

然而，我们可以通过让angular知道一个项目被选中来解决你的问题。我们可以使用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演示

相关文章：