9、构建动态搜索与测试新代码实践

构建动态搜索与测试新代码实践

1. 转换搜索功能为即时搜索

在页面重新加载后，输入搜索词并点击“查找客户”，就能看到搜索结果返回。现在，整个搜索功能已迁移到 Angular 框架下，功能与之前一致，但实现方式更现代化。

将搜索功能转换为使用 Angular 只是优化搜索体验的第一步。在转换过程中保持功能不变，能让我们专注于 Angular 相关的特性。完成转换后，就可以将搜索功能改为即时搜索。

要将搜索功能从点击按钮搜索改为即时搜索，其实并不复杂。由于 Angular 实现了关注点分离，所需的代码都已就位，只需以不同方式将其与用户界面连接起来。

当前，当用户修改文本框内容时，Angular 会更新 CustomerSearchComponent 类中 keywords 的值，虽然无法直接看到，但用户输入时该值会实时更新。若能利用这一特性，就能在用户输入时执行搜索。

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

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

这等价于：

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