Search Suggest Panel
介绍
白色圆角站内搜索面板：输入框带清除按钮，下方热门词胶囊一键填入，结果列表按关键字实时过滤并高亮命中文字，支持上下方向键选择，没有结果时给出提示。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Search Suggest Panel 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add search-suggest-panel
mcp › 使用 8pt MCP 调用 get_component("search-suggest-panel")
代码
Search Suggest Panel 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ssp" role="search"><label class="x-ssp__field"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg><input type="text" placeholder="搜索研究、政策与产品" aria-label="搜索站内内容"><button type="button" class="x-ssp__clear" aria-label="清除"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button></label><div class="x-ssp__chips"><button type="button">可解释性</button><button type="button">模型准则</button><button type="button">扩展政策</button><button type="button">加入我们</button></div><ul class="x-ssp__list" role="listbox"><li role="option" aria-selected="false" data-k="研究追踪模型内部的概念回路可解释性"><span class="x-ssp__cat">研究</span><span class="x-ssp__tt">追踪模型内部的概念回路</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="研究让模型在长任务中保持诚实对齐"><span class="x-ssp__cat">研究</span><span class="x-ssp__tt">让模型在长任务中保持诚实</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="研究从单个特征到完整推理链可解释性"><span class="x-ssp__cat">研究</span><span class="x-ssp__tt">从单个特征到完整推理链</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="政策关于前沿模型透明度的几点建议"><span class="x-ssp__cat">政策</span><span class="x-ssp__tt">关于前沿模型透明度的几点建议</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="承诺审慎扩展政策"><span class="x-ssp__cat">承诺</span><span class="x-ssp__tt">审慎扩展政策</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="承诺模型准则对齐"><span class="x-ssp__cat">承诺</span><span class="x-ssp__tt">模型准则</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="公司加入我们招聘"><span class="x-ssp__cat">公司</span><span class="x-ssp__tt">加入我们</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="产品知衡助手使用指南"><span class="x-ssp__cat">产品</span><span class="x-ssp__tt">知衡助手使用指南</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="产品开发者平台入门"><span class="x-ssp__cat">产品</span><span class="x-ssp__tt">开发者平台入门</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li><li role="option" aria-selected="false" data-k="新闻推出青岚与远岫"><span class="x-ssp__cat">新闻</span><span class="x-ssp__tt">推出青岚与远岫</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></li></ul><p class="x-ssp__empty">没有找到相关内容，换个关键词试试。</p></div>
.x-ssp{box-sizing:border-box;width:100%;max-width:640px;margin:0 auto;padding:14px;border:1px solid #e3e0d6;border-radius:18px;background:#fff;color:#141413;box-shadow:0 30px 60px -30px rgba(20,20,19,.35);font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-ssp *,.x-ssp *::before,.x-ssp *::after{box-sizing:border-box}.x-ssp svg{width:1em;height:1em;flex:none}.x-ssp__field{display:flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 14px;border-radius:12px;background:#f0eee6;color:#6f6b61;font-size:18px}.x-ssp__field input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#141413;font:inherit;font-size:15px}.x-ssp__field input::placeholder{color:#8a8579}.x-ssp__clear{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#6f6b61;font-size:15px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}.x-ssp.has-q .x-ssp__clear{opacity:1;pointer-events:auto}.x-ssp__chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 2px 6px}.x-ssp__chips button{height:28px;padding:0 12px;border:1px solid #e3e0d6;border-radius:99px;background:#faf9f5;color:#3d3a34;font:inherit;font-size:12.5px;cursor:pointer;transition:background .2s}.x-ssp__chips button:hover{background:#f0eee6}.x-ssp__list{display:grid;margin:6px 0 0;padding:0;list-style:none}.x-ssp__list li{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:10px;font-size:14px;cursor:pointer;animation:x-ssp-in .3s ease both}.x-ssp__list li[hidden]{display:none}.x-ssp__list li[aria-selected="true"],.x-ssp__list li:hover{background:#f0eee6}.x-ssp__list li svg{margin-left:auto;color:#8a8579;transition:transform .2s}.x-ssp__list li[aria-selected="true"] svg{transform:translateX(3px);color:#141413}.x-ssp__cat{flex:none;width:44px;color:#8a8579;font-size:12px}.x-ssp__tt mark{background:#f3d9c9;color:inherit;border-radius:3px}.x-ssp__empty{display:none;margin:0;padding:22px 10px;color:#6f6b61;font-size:13.5px;text-align:center}.x-ssp.is-empty .x-ssp__empty{display:block}@keyframes x-ssp-in{from{opacity:0;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.x-ssp__list li{animation:none}}(root) => {
const input = root.querySelector('input');
const items = [...root.querySelectorAll('.x-ssp__list li')];
const titles = items.map(li => li.querySelector('.x-ssp__tt').textContent);
let idx = -1;
const esc = (s) => s.replace(/[&<>]/g, c => ({'&':'&','<':'<','>':'>'}[c]));
const vis = () => items.filter(li => !li.hidden);
const mark = (n) => { idx = n; items.forEach(li => li.setAttribute('aria-selected', 'false')); const v = vis(); if (v[n]) v[n].setAttribute('aria-selected', 'true'); };
const filter = () => {
const q = input.value.trim();
root.classList.toggle('has-q', q.length > 0);
items.forEach((li, i) => {
…订阅 Builder 查看完整源码。查看价格