实现一个搜索框,要求如下:
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…