搜索下拉高亮（Search with Highlighted Results）是什么：效果预览与 AI 设计提示词

效果预览

工作流引擎

▤如何配置工作流引擎？

▥工作流引擎 API 参考

▦工作流引擎常见问题

适合用在哪

全站搜索、帮助中心、文档检索、商品搜索。

容易踩的坑

直接用 innerHTML 拼接高亮关键词，用户输入特殊字符时可能引发 XSS。
高亮加了黄色背景，结果列表满屏荧光笔，反而找不到真正想要的那条。
防抖低于 100ms 或不取消过期请求，慢网下结果列表频繁跳动闪烁。

设计提示词 · Prompt

搜索下拉高亮（Search with Highlighted Results）：搜索框有输入时下方浮出结果面板。每条结果：左侧 24px 类型图标 → 标题（命中的关键词片段用品牌色 650 字重高亮，用 <mark> 或 <em> 包裹）→ 右侧灰色类型标签（"文档"/"文章"/"产品"）。键盘导航当前项浅灰底。面板底部固定一行"查看全部 N 条结果 →"。高亮要克制：只变颜色字重，不加背景色，否则满屏荧光笔。防抖 150-250ms 再发请求，请求图标显示在输入框右侧。

Search with Highlighted Results: when the search box has input, a results panel floats below it. Each result: a 24px type icon on the left → title (matched keyword fragments highlighted in brand color at 650 weight, wrapped in <mark> or <em>) → a gray type tag on the right ("Docs" / "Article" / "Product"). The keyboard-navigated current item has a light gray background. A fixed row at the bottom of the panel: "View all N results →". Keep highlighting restrained: change only color and weight, no background color, otherwise the screen is full of highlighter marks. Debounce 150-250ms before sending requests, with a loading icon shown on the right side of the input.

常见搭配

同一页面里经常和「搜索下拉高亮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

命令面板Command Palette 吸顶模糊导航Sticky Blur Header 快捷键提示Keyboard Hints 加载指示器Spinner / Loader

演示 HTML 结构

<div class="s d-searchdd">
  <div class="d-searchdd__box">工作流<b>引擎</b></div>
  <div class="d-searchdd__res">
    <div class="d-searchdd__r"><span class="d-ico" style="width:17px;height:17px;font-size:9px">▤</span><span>如何配置工作流<em>引擎</em>？</span></div>
    <div class="d-searchdd__r is-on"><span class="d-ico" style="width:17px;height:17px;font-size:9px">▥</span><span>工作流<em>引擎</em> API 参考</span></div>
    <div class="d-searchdd__r"><span class="d-ico" style="width:17px;height:17px;font-size:9px">▦</span><span>工作流<em>引擎</em>常见问题</span></div>
  </div>
</div>