Skip to content

Latest commit

 

History

History
25 lines (13 loc) · 1.32 KB

File metadata and controls

25 lines (13 loc) · 1.32 KB

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

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

  2. 输入为空时不处理。

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

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

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

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

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

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

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

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

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

在线codesandbox, token替换为qfbMTp642uwaIldU6LpJeYcT44U2Sbwv