Search Suggest Panel
Overview
A white rounded site search panel: input with a clear button, popular-term pills that fill it in one click, and a results list that filters live and highlights matches. Arrow keys move the selection, with a message when nothing matches.
Taken from the page template Zhiheng AI Research Company Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Search Suggest Panel to your project in your colors.
Where to use it
Search boxes, AI chat inputs, form fields, file uploads, verification codes and anywhere else people type.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add search-suggest-panel
mcp › Use 8pt MCP to call get_component("search-suggest-panel")
Code
Source for Search Suggest Panel. Motion uses only transform and opacity and respects the Reduce motion setting.
<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) => {
…Subscribe to Builder to see the full source.See pricing