8、优化搜索功能与测试实践

优化搜索功能与测试实践

1. 搜索功能升级：实现即时搜索

在页面重新加载后，输入搜索词并点击“查找客户”，就能看到实际的搜索结果返回。将搜索功能转换为使用 Angular 框架，这是让搜索功能更好地服务用户的重要一步。在转换过程中保持功能不变，能让我们专注于基于 Angular 的特性方面。现在，我们可以进一步改进搜索功能，实现即时搜索。

当前，当用户修改文本字段内容时，Angular 会更新 CustomerSearchComponent 类中 keywords 的值。虽然我们无法直接看到这一过程，但它会在用户输入时自动完成。若能利用这一特性，就能在用户输入时执行搜索。

Angular 提供了通过绑定 ngModelChange 属性来实现这一功能的方法。现有代码如下：

<input bindon-ngModel="keywords" ... >

这等价于：

<input bind-ngModel="keywords"
on-ngModelChange="keywords=$event" ... >

我们可以将 $event 发送到搜索函数，而不是默认地将其赋值给 keywords ：

<inpu