带搜索过滤器的联系人列表

Question

我想像这样在顶部制作带有搜索过滤器的联系人列表

很多人说我们必须通过调用网络 API 来完成，我不能通过在 arrays.I 中创建一些名称来手动完成吗已经尝试过这个 link 也

仍然没有 result.There 也没有在 material 中找到任何组件（https://material.angular.io/components），一些网站提到我们必须使用管道进行过滤，管道对于 me.How我能实现吗？

Answer 1

您可以使用 Array 的 filter (refer this) 方法过滤您的列表并收听 input 的 (keyup) 事件和然后调用一个函数来过滤您的列表。

在Angular.js (v1)中，曾经有一个过滤器（现在称为管道）用来做同样的事情。 Angular 提供此类功能的日子已经一去不复返了。这主要是由于管道（Angular 2 起）要么是纯的，要么是不纯的。默认情况下，Angular 提供的所有管道都是纯管道，因此不再有 filterPipe。

您可以参考下面的 link 以了解 Angular 团队为什么删除了这样的功能：-

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Answer 2

你可以这样做：

https://stackblitz.com/edit/angular-vchhay

使用过滤器，您可以使用输入来实现这一点。

用管道编辑：

https://stackblitz.com/edit/angular-vchhay

使用管道真的很简单。

Answer 3

如果您使用的是 Angular 6，则不再支持过滤器的管道。您将不得不编写自己的管道。

See here

Angular 不提供用于过滤或排序列表的管道。熟悉 AngularJS 的开发人员知道这些是 filter 和 orderBy。 Angular.

中没有等价物

我会选择以下选项之一：

Angular Tutorial，在您的组件中构建一个方法来过滤数组。类似于 Ankit Sharma 的建议。
使用 jQuery 在模板中过滤。（不推荐，但比较简单）这是一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable List</h2>
  <p>Type something in the input field to search the list for specific items:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth</li>
  </ul>  
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

带搜索过滤器的联系人列表

Contact list with search filter

angular

angular-material

angular6

angular-pipe