Spaces:

CVNSS
/

tudienhoangphe

Running

App Files Files Community

CVNSS commited on Feb 7

Commit

86bbff2

verified ·

1 Parent(s): 440bd32

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -541

index.html CHANGED Viewed

@@ -2,605 +2,142 @@
 <html lang="vi">
 <head>
   <meta charset="UTF-8" />
-  <title>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ (OFFLINE PRO)</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <!-- PWA -->
-  <link rel="manifest" href="manifest.webmanifest" />
   <meta name="theme-color" content="#7a0000" />
   <style>
-    :root{
-      --red:#b30000; --yellow:#ffd700; --dark-red:#7a0000;
-      --bg:#fffaf2; --border:#e0c97f; --card:#ffffff;
-      --muted:#666; --ink:#222;
     }
-    *{ box-sizing:border-box; font-family:"Times New Roman", Georgia, serif; }
-    body{ margin:0; background:var(--bg); color:var(--ink); }
-    header{
-      background:linear-gradient(90deg,var(--red),var(--dark-red));
-      color:var(--yellow); padding:16px 24px; border-bottom:5px solid var(--yellow);
-    }
-    header h1{ margin:0; font-size:22px; text-transform:uppercase; letter-spacing:1px; }
-    header small{ display:block; margin-top:6px; font-size:13px; color:#ffeaa7; }
-    main{ padding:20px; max-width:1100px; margin:auto; }
-    .panel{ background:var(--card); border:2px solid var(--border); padding:16px; margin-bottom:16px; }
-    .grid{ display:grid; grid-template-columns: 1fr; gap:10px; }
-    @media (min-width: 860px){
-      .grid{ grid-template-columns: 2fr 1fr; }
     }
-    .hint{
-      background:#fff3c4; border:1px dashed #d6b657; padding:12px; line-height:1.5;
-      font-size:14px;
     }
-    .searchRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
-    .searchBox{ position:relative; flex: 1 1 420px; min-width: 280px; }
-    input[type="text"]{
-      width:100%; padding:12px; font-size:16px;
-      border:2px solid var(--red); outline:none; background:#fff;
     }
-    input[type="text"]:focus{ border-color:var(--dark-red); }
-    select, button{
-      padding:10px 10px; font-size:14px;
-      border:2px solid var(--border); background:#fff; cursor:pointer;
     }
-    button.primary{ border-color:var(--red); }
-    .stats{ font-size:14px; color:#555; margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; }
-    /* Suggestions dropdown */
-    .suggest{
-      position:absolute; left:0; right:0; top:100%;
-      background:#fff; border:1px solid #ddd; z-index:20;
-      max-height: 320px; overflow:auto; display:none;
-    }
-    .suggest.open{ display:block; }
-    .suggest .item{
-      padding:10px 10px; border-bottom:1px dotted #ddd;
-      display:flex; justify-content:space-between; gap:10px;
     }
-    .suggest .item:hover{ background:#fff7dc; }
-    .pill{ font-size:12px; color:#444; border:1px solid #ddd; padding:2px 6px; border-radius:999px; white-space:nowrap; }
-    /* A–Z bar */
-    .azbar{ display:flex; flex-wrap:wrap; gap:6px; }
-    .azbar button{
-      padding:6px 8px; font-size:13px; border:1px solid #ddd;
     }
-    .azbar button.active{ border-color:var(--red); background:#fff2b2; }
-    .entry{ padding:12px 8px; border-bottom:1px dotted #ccc; line-height:1.65; }
-    .entry:last-child{ border-bottom:none; }
-    .word{ font-size:20px; font-weight:bold; color:var(--dark-red); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
-    .pos{ font-style:italic; color:var(--muted); font-size:14px; }
-    .meaning{ margin-top:6px; padding-left:12px; }
-    .meaning span{ display:block; margin-bottom:4px; }
-    .muted{ color:var(--muted); }
-    .highlight{ background:#fff2b2; font-weight:bold; }
-    footer{
-      text-align:center; padding:12px; font-size:13px; color:#555;
-      border-top:2px solid var(--border); margin-top:30px;
     }
-    .kbd{ border:1px solid #bbb; background:#f7f7f7; padding:1px 6px; border-radius:4px; }
   </style>
 </head>
 <body>
-<header>
-  <h1>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ</h1>
-  <small>Tra cứu offline · Không dấu + gợi ý · A–Z bucket · PWA · dev, 2026</small>
-</header>
 <main>
-  <div class="panel hint" id="hint100">
-    <b>Gợi ý tra cứu (100 từ):</b>
-    Gõ từ cần tra ở ô tìm kiếm; bạn có thể gõ <b>không dấu</b> (ví dụ <i>an</i> sẽ tìm <i>ăn, ân, ắn…</i>).
-    Dùng <b>gợi ý</b> xuất hiện ngay dưới ô để chọn nhanh (Enter để tra).
-    Bấm các nút <b>A–Z</b> để giới hạn phạm vi, giúp kết quả nhanh hơn khi từ khóa ngắn.
-    Dùng bộ lọc <b>Từ loại</b> để chỉ xem danh từ/động từ/tính từ…
-    Bật <b>Tìm mờ</b> để chịu lỗi gõ gần đúng (ví dụ “anng” vẫn ra “ăn”).
-    Mẹo: nhấn <span class="kbd">Esc</span> để xoá gõ, nhấn <span class="kbd">↓</span> để đi xuống danh sách gợi ý.
-  </div>
-  <div class="panel">
-    <div class="searchRow">
-      <div class="searchBox">
-        <input id="searchInput" type="text" placeholder="Nhập từ cần tra… (không dấu cũng được)" autocomplete="off" />
-        <div id="suggest" class="suggest" aria-label="Gợi ý"></div>
-      </div>
-      <select id="posFilter" title="Lọc theo từ loại">
-        <option value="">Tất cả từ loại</option>
-        <option value="d">Danh từ</option>
-        <option value="đg">Động từ</option>
-        <option value="t">Tính từ</option>
-        <option value="tr">Trợ từ</option>
-        <option value="c">Cảm từ</option>
-        <option value="p">Phụ từ</option>
-        <option value="k">Kết từ</option>
-        <option value="đ">Đại từ</option>
-      </select>
-      <label style="display:flex; align-items:center; gap:8px;">
-        <input id="fuzzyToggle" type="checkbox" />
-        <span>Tìm mờ (fuzzy)</span>
-      </label>
-      <button class="primary" id="btnInstall" style="display:none;">Cài như App</button>
-      <button id="btnClear">Xoá</button>
-    </div>
-    <div class="stats" id="stats">Đang tải dữ liệu…</div>
-  </div>
-  <div class="panel">
-    <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
-      <div>
-        <b>Giới hạn A–Z:</b> <span class="muted">giúp tìm nhanh khi từ khóa ngắn</span>
-      </div>
-      <div class="azbar" id="azbar"></div>
-    </div>
-  </div>
-  <div class="panel" id="results"></div>
 </main>
-<footer>
-  Dữ liệu: Từ điển tiếng Việt (Hoàng Phê) · Chạy offline hoàn toàn (qua localhost)
-</footer>
 <script>
-/* =========================
-   0) PWA: Service Worker
-========================= */
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker.register("./sw.js").catch(() => {});
-  });
-}
-/* =========================
-   1) Utils: Normalize + Highlight
-========================= */
 function normalizeVN(s) {
-  // NFD tách dấu, bỏ dấu; riêng đ/Đ -> d
-  return (s || "")
-    .toLowerCase()
     .replace(/đ/g, "d")
     .normalize("NFD")
-    .replace(/[\u0300-\u036f]/g, "")
-    .replace(/[^a-z0-9\s\-]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}
-function escapeHTML(str){
-  return (str ?? "").replace(/[&<>"']/g, m => ({
-    "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
-  }[m]));
-}
-function highlight(htmlText, needleNorm){
-  if(!needleNorm) return htmlText;
-  // highlight theo "không dấu": ta highlight thẳng keyword thô trong hiển thị nghĩa/từ (an toàn)
-  // tránh làm chậm: chỉ highlight theo chuỗi gõ gốc (không dấu) bằng regex nhẹ.
-  const raw = escapeHTML(htmlText);
-  const needle = escapeHTML(needleNorm);
-  if(!needle) return raw;
-  // regex an toàn (đã escape)
-  const re = new RegExp("(" + needle.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")", "ig");
-  return raw.replace(re, '<span class="highlight">$1</span>');
-}
-/* =========================
-   2) Fuzzy: Edit Distance (có chặn)
-========================= */
-function editDistanceWithin(a, b, maxDist){
-  // Damerau-Levenshtein giản lược + early-exit
-  if (Math.abs(a.length - b.length) > maxDist) return maxDist + 1;
-  const n=a.length, m=b.length;
-  const dp = Array.from({length:n+1}, () => new Array(m+1).fill(0));
-  for(let i=0;i<=n;i++) dp[i][0]=i;
-  for(let j=0;j<=m;j++) dp[0][j]=j;
-  for(let i=1;i<=n;i++){
-    let rowMin = Infinity;
-    for(let j=1;j<=m;j++){
-      const cost = a[i-1]===b[j-1] ? 0 : 1;
-      let val = Math.min(
-        dp[i-1][j] + 1,
-        dp[i][j-1] + 1,
-        dp[i-1][j-1] + cost
-      );
-      // transposition
-      if(i>1 && j>1 && a[i-1]===b[j-2] && a[i-2]===b[j-1]){
-        val = Math.min(val, dp[i-2][j-2] + 1);
-      }
-      dp[i][j]=val;
-      rowMin = Math.min(rowMin, val);
-    }
-    if(rowMin > maxDist) return maxDist + 1; // early exit
-  }
-  return dp[n][m];
-}
-/* =========================
-   3) Data: Load + Index A–Z
-========================= */
-const posLabel = {
-  "d":"danh từ","đg":"động từ","t":"tính từ","tr":"trợ từ","c":"cảm từ","p":"phụ từ","k":"kết từ","đ":"đ���i từ"
-};
-let ALL = [];                 // toàn bộ mục
-let INDEX = new Map();        // bucket A–Z + "0" (khác)
-let ACTIVE_BUCKET = "";       // "" = tất cả
-let SUGGEST_LIMIT = 12;
-let RESULTS_LIMIT = 400;
-function bucketKeyFromWord(word){
-  const n = normalizeVN(word);
-  const ch = n[0] || "";
-  if(ch >= "a" && ch <= "z") return ch.toUpperCase();
-  if(ch >= "0" && ch <= "9") return "0";
-  return "#";
-}
-function buildIndex(entries){
-  INDEX = new Map();
-  for(const e of entries){
-    const k = bucketKeyFromWord(e.tu);
-    if(!INDEX.has(k)) INDEX.set(k, []);
-    // precompute normalized fields để tìm nhanh
-    const tuNorm = normalizeVN(e.tu);
-    const nghiaText = (e.nghia || []).join(" ");
-    const nghiaNorm = normalizeVN(nghiaText);
-    INDEX.get(k).push({
-      ...e,
-      _tuNorm: tuNorm,
-      _nghiaNorm: nghiaNorm
-    });
-  }
-}
-function getWorkingSet(){
-  if(!ACTIVE_BUCKET) return ALL;
-  return INDEX.get(ACTIVE_BUCKET) || [];
 }
-/* =========================
-   4) Search: exact / contains / fuzzy + pos filter
-========================= */
-function searchEntries(queryRaw, pos, fuzzyOn){
-  const qNorm = normalizeVN(queryRaw);
-  const set = getWorkingSet();
-  if(!qNorm){
-    return set.slice(0, 200);
-  }
-  // Tối ưu: lọc từ loại trước (nhanh)
-  let candidates = pos ? set.filter(e => e.tu_loai === pos) : set;
-  // 1) Exact + Prefix + Contains (ưu tiên)
-  const exact = [];
-  const prefix = [];
-  const contains = [];
-  const inMeaning = [];
-  for(const e of candidates){
-    if(e._tuNorm === qNorm) exact.push(e);
-    else if(e._tuNorm.startsWith(qNorm)) prefix.push(e);
-    else if(e._tuNorm.includes(qNorm)) contains.push(e);
-    else if(e._nghiaNorm.includes(qNorm)) inMeaning.push(e);
   }
-  // 2) Fuzzy (chỉ chạy trên phần còn lại, giới hạn)
-  let fuzzy = [];
-  if(fuzzyOn){
-    const pool = candidates
-      .filter(e => !exact.includes(e) && !prefix.includes(e) && !contains.includes(e))
-      .slice(0, 2500);
-    const maxDist = qNorm.length <= 4 ? 1 : (qNorm.length <= 7 ? 2 : 3);
-    const scored = [];
-    for(const e of pool){
-      // chỉ fuzzy theo "từ", không fuzzy theo nghĩa (đỡ nặng)
-      const d = editDistanceWithin(qNorm, e._tuNorm, maxDist);
-      if(d <= maxDist){
-        scored.push({e, d});
-      }
-    }
-    scored.sort((a,b) => a.d - b.d || a.e._tuNorm.length - b.e._tuNorm.length);
-    fuzzy = scored.slice(0, 120).map(x => x.e);
-  }
-  const merged = [...exact, ...prefix, ...contains, ...fuzzy, ...inMeaning];
-  // loại trùng
-  const seen = new Set();
-  const out = [];
-  for(const e of merged){
-    const key = e.tu + "||" + e.tu_loai + "||" + (e.nghia?.[0] || "");
-    if(seen.has(key)) continue;
-    seen.add(key);
-    out.push(e);
-    if(out.length >= RESULTS_LIMIT) break;
-  }
-  return out;
-}
-/* =========================
-   5) UI: Render Results + Suggestions
-========================= */
-const $ = (id) => document.getElementById(id);
-const input = $("searchInput");
-const suggestBox = $("suggest");
-const resultsBox = $("results");
-const statsBox = $("stats");
-const posFilter = $("posFilter");
-const fuzzyToggle = $("fuzzyToggle");
-const btnClear = $("btnClear");
-function renderResults(list, queryRaw){
-  const qNorm = normalizeVN(queryRaw);
-  resultsBox.innerHTML = "";
-  if(!list.length){
-    resultsBox.innerHTML = `<div class="muted">Không tìm thấy kết quả.</div>`;
-    return;
-  }
-  for(const item of list){
     const div = document.createElement("div");
     div.className = "entry";
-    const wordHTML = highlight(item.tu, qNorm);
-    const posText = item.tu_loai_day_du || posLabel[item.tu_loai] || item.tu_loai;
     let html = `
       <div class="word">
-        ${wordHTML}
-        <span class="pos">(${escapeHTML(posText)})</span>
       </div>
       <div class="meaning">
     `;
-    const nghia = item.nghia || [];
-    for(let i=0;i<nghia.length;i++){
-      const m = highlight(nghia[i], qNorm);
-      html += `<span>${i+1}. ${m}</span>`;
-    }
-    html += `</div>`;
-    div.innerHTML = html;
-    resultsBox.appendChild(div);
-  }
-}
-function renderSuggestions(list){
-  suggestBox.innerHTML = "";
-  if(!list.length){
-    suggestBox.classList.remove("open");
-    return;
-  }
-  for(const item of list){
-    const row = document.createElement("div");
-    row.className = "item";
-    row.innerHTML = `
-      <div><b>${escapeHTML(item.tu)}</b> <span class="muted">(${escapeHTML(item.tu_loai_day_du || posLabel[item.tu_loai] || item.tu_loai)})</span></div>
-      <span class="pill">${escapeHTML(bucketKeyFromWord(item.tu))}</span>
-    `;
-    row.addEventListener("mousedown", (ev) => {
-      ev.preventDefault();
-      input.value = item.tu;
-      runSearch(true);
-      suggestBox.classList.remove("open");
     });
-    suggestBox.appendChild(row);
-  }
-  suggestBox.classList.add("open");
-}
-function buildSuggestions(queryRaw){
-  const qNorm = normalizeVN(queryRaw);
-  if(!qNorm) return [];
-  const set = getWorkingSet();
-  const pos = posFilter.value;
-  const fuzzyOn = fuzzyToggle.checked;
-  // ưu tiên theo "từ" (không quét nghĩa) để nhanh
-  let pool = pos ? set.filter(e => e.tu_loai === pos) : set;
-  const exact = [];
-  const prefix = [];
-  const contains = [];
-  for(const e of pool){
-    if(e._tuNorm === qNorm) exact.push(e);
-    else if(e._tuNorm.startsWith(qNorm)) prefix.push(e);
-    else if(e._tuNorm.includes(qNorm)) contains.push(e);
-    if(exact.length + prefix.length >= SUGGEST_LIMIT) break;
-  }
-  let fuzzy = [];
-  if(fuzzyOn && (exact.length + prefix.length) < SUGGEST_LIMIT){
-    const maxDist = qNorm.length <= 4 ? 1 : 2;
-    const scored = [];
-    // fuzzy trên mẫu nhỏ để mượt
-    for(const e of pool.slice(0, 1800)){
-      if(e._tuNorm.startsWith(qNorm) || e._tuNorm === qNorm) continue;
-      const d = editDistanceWithin(qNorm, e._tuNorm, maxDist);
-      if(d <= maxDist) scored.push({e,d});
-    }
-    scored.sort((a,b) => a.d - b.d || a.e._tuNorm.length - b.e._tuNorm.length);
-    fuzzy = scored.slice(0, SUGGEST_LIMIT).map(x => x.e);
-  }
-  const merged = [...exact, ...prefix, ...contains, ...fuzzy];
-  const seen = new Set();
-  const out = [];
-  for(const e of merged){
-    const k = e.tu + "||" + e.tu_loai;
-    if(seen.has(k)) continue;
-    seen.add(k);
-    out.push(e);
-    if(out.length >= SUGGEST_LIMIT) break;
-  }
-  return out;
-}
-/* =========================
-   6) A–Z Bar
-========================= */
-function buildAZBar(){
-  const az = [];
-  for(let c=65;c<=90;c++) az.push(String.fromCharCode(c));
-  az.push("0", "#");
-  const bar = $("azbar");
-  bar.innerHTML = "";
-  const btnAll = document.createElement("button");
-  btnAll.textContent = "ALL";
-  btnAll.className = ACTIVE_BUCKET ? "" : "active";
-  btnAll.addEventListener("click", () => { ACTIVE_BUCKET=""; buildAZBar(); runSearch(true); });
-  bar.appendChild(btnAll);
-  for(const k of az){
-    const b = document.createElement("button");
-    b.textContent = k;
-    b.className = (ACTIVE_BUCKET === k) ? "active" : "";
-    b.title = "Giới hạn theo nhóm " + k;
-    b.addEventListener("click", () => {
-      ACTIVE_BUCKET = k;
-      buildAZBar();
-      runSearch(true);
-    });
-    bar.appendChild(b);
-  }
-}
-/* =========================
-   7) Controller: Debounce Search
-========================= */
-let tmr = null;
-function setStats(text){
-  statsBox.textContent = text;
-}
-function runSearch(fromPick=false){
-  const q = input.value || "";
-  const pos = posFilter.value;
-  const fuzzyOn = fuzzyToggle.checked;
-  const res = searchEntries(q, pos, fuzzyOn);
-  const scope = ACTIVE_BUCKET ? ` · Bucket ${ACTIVE_BUCKET}` : " · Tất cả";
-  setStats(
-    `Kết quả: ${res.length.toLocaleString("vi-VN")}${scope}` +
-    (pos ? ` · Lọc: ${posLabel[pos] || pos}` : "") +
-    (fuzzyOn ? " · Fuzzy: ON" : "")
-  );
-  renderResults(res, q);
-  // suggestions: chỉ hiện khi đang gõ, không phải khi click chọn
-  if(!fromPick){
-    const sug = buildSuggestions(q);
-    renderSuggestions(sug);
-  }
-}
-function debounceSearch(){
-  clearTimeout(tmr);
-  tmr = setTimeout(() => runSearch(false), 60);
 }
-/* =========================
-   8) Events
-========================= */
-input.addEventListener("input", () => debounceSearch());
-posFilter.addEventListener("change", () => runSearch(true));
-fuzzyToggle.addEventListener("change", () => runSearch(true));
-btnClear.addEventListener("click", () => {
-  input.value = "";
-  suggestBox.classList.remove("open");
-  runSearch(true);
-  input.focus();
-});
-document.addEventListener("click", (e) => {
-  if(!suggestBox.contains(e.target) && e.target !== input){
-    suggestBox.classList.remove("open");
-  }
-});
-input.addEventListener("keydown", (e) => {
-  if(e.key === "Escape"){
-    input.value = "";
-    suggestBox.classList.remove("open");
-    runSearch(true);
-  }
-  if(e.key === "Enter"){
-    suggestBox.classList.remove("open");
-    runSearch(true);
-  }
-});
-/* =========================
-   9) Load JSON (cùng thư mục)
-========================= */
-(async function boot(){
-  try{
-    setStats("Đang tải dữ liệu…");
-    const res = await fetch("./tu_dien_hoang_phe_clean.json", { cache: "no-cache" });
-    const data = await res.json();
-    // data.muc_tu theo file JSON bạn đang dùng
-    ALL = (data.muc_tu || []);
-    buildIndex(ALL);
-    buildAZBar();
-    setStats(`Đã tải: ${ALL.length.toLocaleString("vi-VN")} mục từ · Sẵn sàng tra cứu`);
-    renderResults(getWorkingSet().slice(0, 160), "");
-  }catch(err){
-    console.error(err);
-    setStats("❌ Không đọc được JSON. Hãy chạy bằng server nội bộ (localhost).");
-    resultsBox.innerHTML = `
-      <div class="muted">
-        <b>Không load được dữ liệu.</b><br/>
-        Mở terminal trong thư mục và chạy: <span class="kbd">python -m http.server</span><br/>
-        Sau đó mở: <span class="kbd">http://localhost:8000</span>
-      </div>
-    `;
-  }
-})();
-</script>
-<script>
-/* =========================
-   10) PWA Install Button
-========================= */
-let deferredPrompt = null;
-const btnInstall = document.getElementById("btnInstall");
-window.addEventListener("beforeinstallprompt", (e) => {
-  e.preventDefault();
-  deferredPrompt = e;
-  btnInstall.style.display = "inline-block";
-});
-btnInstall?.addEventListener("click", async () => {
-  if(!deferredPrompt) return;
-  deferredPrompt.prompt();
-  await deferredPrompt.userChoice;
-  deferredPrompt = null;
-  btnInstall.style.display = "none";
-});
 </script>
 </body>
 </html>

 <html lang="vi">
 <head>
   <meta charset="UTF-8" />
+  <title>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <!-- PWA -->
+  <link rel="manifest" href="./manifest.webmanifest" />
   <meta name="theme-color" content="#7a0000" />
   <style>
+    body {
+      margin: 0;
+      font-family: "Times New Roman", serif;
+      background: #fffaf2;
     }
+    header {
+      background: #7a0000;
+      color: gold;
+      padding: 15px;
+      text-align: center;
+      font-size: 20px;
+      font-weight: bold;
     }
+    main {
+      max-width: 900px;
+      margin: auto;
+      padding: 20px;
     }
+    input {
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      border: 2px solid #7a0000;
     }
+    .entry {
+      padding: 10px;
+      border-bottom: 1px solid #ddd;
     }
+    .word {
+      font-size: 20px;
+      color: #7a0000;
+      font-weight: bold;
     }
+    .pos {
+      font-style: italic;
+      color: #666;
+      margin-left: 8px;
     }
+    .meaning {
+      margin-left: 12px;
     }
   </style>
 </head>
 <body>
+<header>TỪ ĐIỂN TIẾNG VIỆT – HOÀNG PHÊ</header>
 <main>
+  <input id="searchInput" placeholder="Nhập từ cần tra (không dấu cũng được)" />
+  <div id="stats">Đang tải dữ liệu…</div>
+  <div id="results"></div>
 </main>
 <script>
+let dictionary = [];
 function normalizeVN(s) {
+  return s.toLowerCase()
     .replace(/đ/g, "d")
     .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
 }
+fetch("./tu_dien_hoang_phe_clean.json")
+  .then(res => res.json())
+  .then(data => {
+    dictionary = data.muc_tu;
+    document.getElementById("stats").innerText =
+      "Tổng mục từ: " + dictionary.length;
+    render(dictionary.slice(0, 200));
+  });
+const input = document.getElementById("searchInput");
+input.addEventListener("input", () => {
+  const q = input.value.trim();
+  const qn = normalizeVN(q);
+  if (!qn) {
+    render(dictionary.slice(0, 200));
+    return;
   }
+  const result = dictionary.filter(e => {
+    const w = normalizeVN(e.tu);
+    const m = normalizeVN(e.nghia.join(" "));
+    return w.includes(qn) || m.includes(qn);
+  });
+  document.getElementById("stats").innerText =
+    "Kết quả: " + result.length;
+  render(result.slice(0, 400));
+});
+function render(list) {
+  const box = document.getElementById("results");
+  box.innerHTML = "";
+  list.forEach(item => {
     const div = document.createElement("div");
     div.className = "entry";
     let html = `
       <div class="word">
+        ${item.tu}
+        <span class="pos">(${item.tu_loai_day_du})</span>
       </div>
       <div class="meaning">
     `;
+    item.nghia.forEach((n, i) => {
+      html += `<div>${i + 1}. ${n}</div>`;
     });
+    html += "</div>";
+    div.innerHTML = html;
+    box.appendChild(div);
+  });
 }
 </script>
 </body>
 </html>