青梧 UI

Search 搜索

打字机轮播占位提示 + @property 三色流光边框 + 类别筛选轮转 + 全键盘导航。按 / 或 Ctrl+K 打开面板;支持异步服务端搜索(search 选项:防抖 + 竞态取消 + 加载/错误态)。

操作日志
暂无日志,操作搜索后将在此显示
import { SearchBox } from "@qingwu-ui/search";
import "@qingwu-ui/search/style.css";

function CommandPalette() {
  const rootRef = useRef<HTMLDivElement>(null);
  const sbRef = useRef<SearchBox | null>(null);

  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    sbRef.current = new SearchBox(el, {
  placeholders: ["搜索节日", "如「中秋节」"],
  categories: ["全部", "节日", "节气", "功能"],
  items: [ /* ... 搜索条目 */ ],
  onSelect: (item) => console.log(item),
    });
    return () => sbRef.current?.destroy();
  }, []);

  return <div ref={rootRef} />;
}