Update index.html

index.html

@@ -2,129 +2,96 @@
 <html lang="vi">
 <head>
   <meta charset="UTF-8">
-  <title>Tra cứu lịch sử sáp nhập xã phường 2025</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
+  <title>Tra cứu xã/phường mới - đối chiếu xã/phường trước sáp nhập (2025)</title>
   <style>
-    body { background: #f8fafc; }
-    .choices__inner { min-height: 42px !important; }
+    body { font-family: Arial, sans-serif; margin: 24px; }
+    h2 { color: #006e54; }
+    label { font-weight: bold; }
+    select, input[type="text"] { margin: 0 12px 12px 0; padding: 6px; }
+    table { border-collapse: collapse; margin-top: 18px; width: 100%; }
+    th, td { border: 1px solid #ccc; padding: 8px; }
+    th { background: #f7f7f7; }
+    #result { margin-top: 20px; }
+    .note { color: #888; font-size: 0.9em; margin-top: 8px;}
   </style>
 </head>
 <body>
-<div class="container py-5">
-  <h2 class="mb-4 text-primary">🔎 Tra cứu lịch sử sáp nhập xã/phường (2025)</h2>
-  <div class="card shadow p-4 mb-4">
-    <form id="searchForm" autocomplete="off">
-      <div class="row mb-3">
-        <div class="col-md-6 mb-2">
-          <label for="ward_new" class="form-label">Chọn xã/phường mới</label>
-          <select class="form-select" id="ward_new">
-            <option value="">-- Chọn hoặc gõ tên xã/phường mới --</option>
-          </select>
-        </div>
-        <div class="col-md-6 mb-2">
-          <label for="province" class="form-label">Tỉnh/Thành phố</label>
-          <select class="form-select" id="province">
-            <option value="">-- Chọn tỉnh/thành phố --</option>
-          </select>
-        </div>
-      </div>
-      <button class="btn btn-primary" type="submit">Tra cứu</button>
-      <button class="btn btn-outline-secondary ms-2" type="button" id="resetBtn">Làm mới</button>
-    </form>
-  </div>
-  <div id="resultArea"></div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
-<script>
-let allData = [];
-const dataUrl = "vn_wards_2025.json"; // đổi tên nếu file khác
+  <h2>Tra cứu Xã/Phường mới → Xã/Phường trước sáp nhập (2025)</h2>
+  <label for="province">Tỉnh/Thành:</label>
+  <select id="province">
+    <option value="">-- Chọn Tỉnh/Thành --</option>
+  </select>
+  <label for="ward_new">Phường/Xã mới:</label>
+  <select id="ward_new" disabled>
+    <option value="">-- Chọn Phường/Xã mới --</option>
+  </select>
+  <div id="result"></div>
+  <div class="note">Nguồn dữ liệu: <b>vn_wards_2025.json</b> - bản cập nhật sáp nhập hành chính 2025.</div>
 
-const wardNewSel = document.getElementById("ward_new");
-const provinceSel = document.getElementById("province");
-const resultArea = document.getElementById("resultArea");
-const searchForm = document.getElementById("searchForm");
-const resetBtn = document.getElementById("resetBtn");
+  <script>
+    let DATA = [];
+    // NÊN: nhúng file JSON nhỏ vào trong code hoặc dùng fetch nếu host file ngoài
+    // Demo: Nhúng trực tiếp (copy đoạn JSON rút gọn nếu cần tối ưu tải trang)
+    fetch('vn_wards_2025.json')
+      .then(r => r.json())
+      .then(data => {
+        DATA = data;
+        initProvinces();
+      });
 
-let wardChoices = new Choices(wardNewSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
-let provinceChoices = new Choices(provinceSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
+    // Khởi tạo dropdown tỉnh/thành
+    function initProvinces() {
+      const provinces = [...new Set(DATA.map(d => d.province))].sort();
+      const selProvince = document.getElementById('province');
+      provinces.forEach(p => {
+        const opt = document.createElement('option');
+        opt.value = p; opt.textContent = p;
+        selProvince.appendChild(opt);
+      });
+      selProvince.addEventListener('change', updateWards);
+      document.getElementById('ward_new').addEventListener('change', showResult);
+    }
 
-async function loadData() {
-  let res = await fetch(dataUrl);
-  allData = await res.json();
+    // Cập nhật danh sách phường/xã mới khi chọn tỉnh
+    function updateWards() {
+      const province = this.value;
+      const wardSel = document.getElementById('ward_new');
+      wardSel.innerHTML = '<option value="">-- Chọn Phường/Xã mới --</option>';
+      wardSel.disabled = !province;
+      if (province) {
+        const wards = DATA.filter(d => d.province === province)
+                          .map(d => d.ward_new)
+                          .filter((v,i,a) => v && a.indexOf(v) === i)
+                          .sort((a,b) => a.localeCompare(b));
+        wards.forEach(w => {
+          const opt = document.createElement('option');
+          opt.value = w; opt.textContent = w;
+          wardSel.appendChild(opt);
+        });
+      }
+      document.getElementById('result').innerHTML = "";
+    }
 
-  // Lấy danh sách xã/phường mới duy nhất
-  let wards = [...new Set(allData.map(e => e.ward_new))].sort();
-  wardChoices.setChoices([{ value: '', label: '-- Chọn hoặc gõ tên xã/phường mới --', selected: true, disabled: true }, ...wards.map(w => ({value: w, label: w}))], 'value', 'label', true);
-
-  // Lấy danh sách tỉnh duy nhất
-  let provinces = [...new Set(allData.map(e => e.province))].sort();
-  provinceChoices.setChoices([{ value: '', label: '-- Chọn tỉnh/thành phố --', selected: true, disabled: true }, ...provinces.map(p => ({value: p, label: p}))], 'value', 'label', true);
-}
-
-// Khi chọn xã/phường mới → tự động lọc tỉnh gợi ý
-wardNewSel.addEventListener("change", function() {
-  if (!this.value) return;
-  let provs = allData.filter(e => e.ward_new === this.value).map(e => e.province);
-  provs = [...new Set(provs)];
-  provinceChoices.setChoices([{ value: '', label: '-- Chọn tỉnh/thành phố --', selected: true, disabled: true }, ...provs.map(p => ({value: p, label: p}))], 'value', 'label', true);
-});
-
-provinceSel.addEventListener("change", function() {
-  if (!this.value) return;
-  let wards = allData.filter(e => e.province === this.value).map(e => e.ward_new);
-  wards = [...new Set(wards)];
-  wardChoices.setChoices([{ value: '', label: '-- Chọn hoặc gõ tên xã/phường mới --', selected: true, disabled: true }, ...wards.map(w => ({value: w, label: w}))], 'value', 'label', true);
-});
-
-searchForm.addEventListener("submit", function(e) {
-  e.preventDefault();
-  resultArea.innerHTML = "";
-  let rs = allData.filter(e => 
-    (!provinceSel.value || e.province === provinceSel.value) &&
-    (!wardNewSel.value || e.ward_new === wardNewSel.value)
-  );
-  if (rs.length === 0) showError("Không tìm thấy dữ liệu.");
-  else renderResult(rs);
-});
-
-resetBtn.addEventListener("click", function() {
-  provinceChoices.setChoiceByValue('');
-  wardChoices.setChoiceByValue('');
-  resultArea.innerHTML = "";
-});
-
-function renderResult(list) {
-  resultArea.innerHTML = `
-    <div class="card shadow p-3 mt-2">
-      <h5 class="mb-3 text-success">Kết quả: <span class="text-dark small">${list.length} xã/phường</span></h5>
-      <div style="max-height:400px;overflow:auto;">
-      <table class="table table-bordered table-hover align-middle small">
-        <thead class="table-light"><tr>
-          <th>Tỉnh/Thành</th>
-          <th>Phường/Xã mới</th>
-          <th>Phường/Xã trước sáp nhập</th>
-        </tr></thead>
-        <tbody>
-        ${list.map(d=>`
+    // Hiển thị kết quả
+    function showResult() {
+      const province = document.getElementById('province').value;
+      const ward_new = this.value;
+      const div = document.getElementById('result');
+      if (!province || !ward_new) { div.innerHTML = ""; return; }
+      const found = DATA.find(d => d.province === province && d.ward_new === ward_new);
+      if (found) {
+        div.innerHTML = `<table>
+          <tr><th>Tỉnh/Thành</th><th>Phường/Xã mới</th><th>Phường/Xã trước sáp nhập</th></tr>
           <tr>
-            <td>${d.province||''}</td>
-            <td>${d.ward_new||''}</td>
-            <td>${d.ward_old||''}</td>
+            <td>${found.province}</td>
+            <td>${found.ward_new}</td>
+            <td>${found.ward_old ? found.ward_old : "<i>Không rõ</i>"}</td>
           </tr>
-        `).join('')}
-        </tbody>
-      </table>
-      </div>
-    </div>
-  `;
-}
-function showError(msg) {
-  resultArea.innerHTML = `<div class="alert alert-danger"><b>Lỗi:</b> ${msg}</div>`;
-}
-
-loadData();
-</script>
+        </table>`;
+      } else {
+        div.innerHTML = "<i>Không tìm thấy thông tin!</i>";
+      }
+    }
+  </script>
 </body>
 </html>