搜索框

Search Box

UI 组件也叫：搜索栏、搜索输入框、查询框、Search Bar、SearchInput

一句话：带放大镜图标的输入框，输入关键词后按回车或点搜索按钮，在页面、列表或全站中查找内容。

详细解释

搜索框是专门用来「找东西」的 输入框：左侧或右侧有放大镜图标，框里提示可以搜什么，比如「搜索订单号、客户名」，输入后按回车或点搜索按钮触发，有内容时右侧出现清空的 ×。常见位置有两种：顶部导航栏里的全站搜索，以及列表、表格上方只搜当前数据的搜索框。

它和普通输入框的区别在用途：普通输入框填的内容会被提交保存，搜索框的内容只是查询条件。搜索框可以边输边搜，这时要加防抖，避免每敲一个字就请求一次；也可以展开搜索建议和历史记录，这就是 自动补全。搜索结果为空时要给出明确提示，而不是一片空白。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

在订单列表上方左侧放一个宽 280px 的搜索框，左边放大镜图标，占位提示「搜索订单号或客户名」。输入后停顿 300ms 自动搜索，按回车立即搜索；有内容时右侧显示清空按钮，点击后恢复完整列表；没有结果时显示「没有找到相关订单」。

由放大镜图标、关键词输入区和清空按钮组成，有时右侧带独立的搜索按钮，下方可以展开搜索建议列表。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。