Javascript 打开列表，单击输入并根据选择的选项创建数组

我必须做一个输入，一旦点击，它会显示一个可用选项列表，用户可以选择多个选项。一旦选择了该选项，它将被添加到一个数组中，并在输入中显示为标记，就像在询问堆栈溢出问题时选择标记的输入一样。很明显，我希望像堆栈溢出一样删除标记。通过对服务器的http请求检索多个选项

注：下面的“点击”绑定就是一个例子。我不知道这是正确的还是应该改变

这是我认为在用户单击时包含输入和列表的HTML：

<div class="form-group row">
  <label for="role" class="col-md-3 col-form-label">Roles</label>
  <div class="col-md-9">
    <input type="text" id="role" name="role" class="form-control">
    <div class="container-fluid">
      <div class="row" *ngFor="let role of roles">
        <div (click)="getRole()">{{role.name}}</div>
      </div>
    </div>
  </div>
</div>

我使用Angular 5.2.8和Bootstrap 4

因此，我的问题是：

• 连接的函数应该做什么（函数“单击”）来执行我的请求
• 我需要使用JQuery或其他库吗

---

如果您对使用库而不是从头开始创建库感兴趣，则以下提到的库可以提供帮助：

---

如果您对使用库而不是从头开始创建库感兴趣，则以下提到的库可以提供帮助：

---

谢谢。这正是我要找的谢谢你。这正是我要找的D

[  
  {  
    "id": 1,
    "name": "name1",
  }
  {  
    "id": 2,
    "name": "name2",
  }
]