Emoji 搜尋（無廣告）

flowchart TD
    CDN["📦 CDN 資料來源\nunpkg.com/emoji.json@14.0.0\nfetch() 載入完整 JSON"] -->|"1800+ 筆"| MAP["data.map() 正規化\n每筆：{ char, name, keywords }\nname+keywords 轉小寫供搜尋"]
    MAP --> GRID["初始渲染 <div#emoji-grid>\nCSS Grid 自動排列\ngrid-template-columns:\nrepeat(auto-fill, minmax(72px,1fr))\n上限顯示 200 筆"]

    GRID --> INPUT["使用者輸入關鍵字\n<input#emoji-search>\n支援多詞空格分隔"]
    INPUT --> SEARCH["input 事件 → search()\n拆分關鍵字：kw = val.split(/\\s+/)\n每個詞都必須命中\nhay = name + keywords"]
    SEARCH -->|"例：red heart"| HIT["name 含 'red' 且含 'heart'\n→ ❤️ red heart 等命中"]
    SEARCH -->|"例：cat"| HIT2["name 含 'cat'\n→ 🐱🐈😺 等命中"]
    HIT --> RENDER["重繪 Grid\n顯示 N 筆（超過 200 筆\n只渲染前 200）"]
    HIT2 --> RENDER

    RENDER --> CLICK["點擊 emoji-cell\n取 data-char 屬性"]
    CLICK --> COPY["navigator.clipboard.writeText(char)\n→ Toast「已複製：😀」"]
    CLICK -.->|"hover 時"| TIP["CSS ::after tooltip\n顯示 :shortcode: 📋"]