Angular4怎么实现立即查询

发布时间：2020-12-17 08:16:28 所属栏目：安全来源：网络整理

导读：前言最近小编在做的项目中要求输入查询内容不需要点击查询内容就可以实现查询功能，下面小编就来介绍一下Angular4怎么实现查询功能。一、点击查询按钮出现查询内容如果是这种情况的话，那么输入框和查询按钮就是分离的，点击查询按钮的时候输入框需要获取

前言

最近小编在做的项目中要求输入查询内容不需要点击查询内容就可以实现查询功能，下面小编就来介绍一下Angular4怎么实现查询功能。

一、点击查询按钮出现查询内容

如果是这种情况的话，那么输入框和查询按钮就是分离的，点击查询按钮的时候输入框需要获取输入框中的内容，将输入框中的内容作为查询条件。这里用到的就是查询按钮，也就是按钮的click事件。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" placeholder="书名/作者名" id="find" />
</div>
<div class="right_icon">
<i class="fa fa-search " aria-hidden="true" (click)="findResult()"></i>
</div>

最终效果：（查询结果显示在了新的页面）

二、输入查询内容回车出现查询结果

如果采用这种情况的话，我们只需要有输入框就可以了，不需要再添加删除按钮了，我们只需要在输入框输入查询条件，直接点击回车就可以查询，这样实现起来也方便，用户友好性也提升了。这里用的的输入框change事件，输入框内容改变，点击回车就会触发该事件。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" (change)="query()" placeholder="书名" />
</div>

最终效果：

三、输入查询内容立即出现查询结果

这种情况非常适合于手机端，也极大的提升了用户友好性，用户输入查询条件就可以立即得到结果，随着用户输入条件的不断精确，获得的结果也不断地精确。用到的输入框的keyup事件，键盘弹起就会触发查询。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" (keyup)="query()" placeholder="书名" />
</div>

最终效果：

总结

同样的功能实现的方法有很多，我们要选择的就是最适合用户的，用户体验最佳的方式来实现，所以我们的目的不是实现功能，是给用户最好用的产品。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!