Angular 2在数组中搜索并选择一个项目

在我的应用程序中，我从在线Web服务中获取用户列表，并将其存储到fetchedUsers的数组中。我在Angular 2中使用了模型驱动的表单。我有一个输入文本字段，它接受来自用户的输入。我有一个工作搜索管道，它从文本字段获取输入并仅显示匹配的数据。我试图执行与here相同的搜索功能。我试图通过一些角度2插件（如ng2-select）获得此行为，但没有运气。我不想要一个可以搜索的select元素。我想要一个可以搜索和显示匹配数据的输入字段。
Angular 2在数组中搜索并选择一个项目

已经完成：

到目前为止，我可以搜索和显示匹配的数据。如果您键入某些内容（例如a），则可以在输入字段下方看到结果。

努力实现：

我想用键盘的上下键，并通过结果来导航。如果用户按下我想被添加到selectedUsers和显示内容的数组，项目项回车键下面的selectedUsers。

请问如何实现这种行为？为了理解你可以访问上面提到的链接。

我有我的应用程序here和代码工作演示可以github

来源

2016-11-22 usmanwalana

抱歉，您的演示不能正常工作，没有显示出来没有用户... – foch

所以，你要俗称“自动完成”功能，对不对？你有没有检查过这个例子：https://www.npmjs.com/package/ng2-auto-complete and plunker http://plnkr.co/edit/3pB1Gx?p=preview？ –

@PetrAdam非常感谢。我测试了这个插件及其工作。 – usmanwalana

通话功能使用(keyup.enter)进入并获得选择的值进行查看。

<option #val (keyup.enter)="myFunction(val)"></option>

来源

2016-11-22 16:19:42 Thyagu

Angular 2在数组中搜索并选择一个项目

回答

相关问题