分别用rxjs、纯js实现搜索框功能

442 阅读1分钟

实现一个搜索框,要求如下:

1. 包含搜索输入框、搜索按钮、重置按钮、搜索提示框列表、搜索结果列表、loading 状态、请求失败状态。

2. 输入为空时不处理。

3. 输入与上次相同时不做处理。

4. 用户输入后 300ms,根据输入从后台获取提示内容,请求成功显示搜索提示框列表,请求失败则不显示。

5. 点击搜索提示框列表后,搜索输入框内容替换为提示内容,并自动触发搜索。

6. 鼠标点击搜索按钮、回车键按下时触发搜索。

7. 搜索前取消上次正在进行中的搜索请求,隐藏搜索提示框。

8. 对鼠标点击搜索按钮、回车键按下做节流,时间为 500ms。

9. 若请求成功,显示搜索结果列表。若请求失败,自动重试最多 3 次,如果依然失败则显示请求失败状态。

10. 请求进行中显示 loading,请求成功后,取消 loading。请求失败并完成重试后,取消 loading。

11. 点击重置按钮重置搜索框、重置搜索结果列表、隐藏 loading 状态、取消当前请求、隐藏请求失败状态、隐藏搜索提示框列表。

DEMO:

需要先将api.js中token改为qfbMTp642uwaIldU6LpJeYcT44U2Sbwv

Rxjs:

codesandbox.io/s/rxjs-sear…

js:

codesandbox.io/s/js-search…

接口定义:

apifox.com/apidoc/shar…