Spaces:

CVNSS
/

sapnhap3321

Running

App Files Files Community

CVNSS commited on Jul 4, 2025

Commit

984e562

verified ·

1 Parent(s): 866ac6c

Update index.html

Browse files

Files changed (1) hide show

index.html +94 -53

index.html CHANGED Viewed

@@ -2,10 +2,25 @@
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
-    <title>Tra cứu Đơn vị Hành chính - Luat.ai API</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Bootstrap 5 CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body class="bg-light">
 <div class="container py-5">
@@ -15,33 +30,34 @@
             <div class="row mb-3">
                 <div class="col-md-4 mb-2">
                     <label for="province" class="form-label">Tỉnh/Thành phố cũ</label>
-                    <select class="form-select" id="province" name="province" required>
-                        <option value="">-- Chọn tỉnh/thành phố --</option>
                     </select>
                 </div>
                 <div class="col-md-4 mb-2">
                     <label for="district" class="form-label">Quận/Huyện cũ</label>
-                    <select class="form-select" id="district" name="district">
-                        <option value="">-- Chọn quận/huyện --</option>
                     </select>
                 </div>
                 <div class="col-md-4 mb-2">
                     <label for="ward" class="form-label">Phường/Xã cũ</label>
-                    <select class="form-select" id="ward" name="ward">
-                        <option value="">-- Chọn phường/xã --</option>
                     </select>
                 </div>
             </div>
             <button class="btn btn-primary" type="submit" id="searchBtn">
-                Tra cứu
             </button>
-            <span id="loading" style="display:none;" class="ms-3 text-info">Đang xử lý...</span>
         </form>
     </div>
     <div id="resultArea"></div>
 </div>
 <script>
 const apiBase = "https://api.luat.ai/administrative";
 const provinceSel = document.getElementById("province");
@@ -50,49 +66,42 @@ const wardSel = document.getElementById("ward");
 const resultArea = document.getElementById("resultArea");
 const searchForm = document.getElementById("searchForm");
 const loading = document.getElementById("loading");
-// Load province list
 async function loadProvinces() {
     let res = await fetch(apiBase + '/provinces');
     let data = await res.json();
-    data.forEach(p => {
-        let opt = document.createElement("option");
-        opt.value = p;
-        opt.innerText = p;
-        provinceSel.appendChild(opt);
-    });
 }
-// Load districts when province changes
 provinceSel.addEventListener("change", async function() {
-    districtSel.innerHTML = `<option value="">-- Chọn quận/huyện --</option>`;
-    wardSel.innerHTML = `<option value="">-- Chọn phường/xã --</option>`;
     if (!this.value) return;
     let res = await fetch(apiBase + '/districts?province=' + encodeURIComponent(this.value));
     let data = await res.json();
-    data.forEach(d => {
-        let opt = document.createElement("option");
-        opt.value = d;
-        opt.innerText = d;
-        districtSel.appendChild(opt);
-    });
 });
-// Load wards when district changes
 districtSel.addEventListener("change", async function() {
-    wardSel.innerHTML = `<option value="">-- Chọn phường/xã --</option>`;
     if (!this.value || !provinceSel.value) return;
     let res = await fetch(apiBase + '/wards?province=' + encodeURIComponent(provinceSel.value) + '&district=' + encodeURIComponent(this.value));
     let data = await res.json();
-    data.forEach(w => {
-        let opt = document.createElement("option");
-        opt.value = w;
-        opt.innerText = w;
-        wardSel.appendChild(opt);
-    });
 });
-// Handle search
 searchForm.addEventListener("submit", async function(e) {
     e.preventDefault();
     resultArea.innerHTML = "";
@@ -104,44 +113,76 @@ searchForm.addEventListener("submit", async function(e) {
     let url = apiBase + '/search?' + params.join('&');
     try {
         let res = await fetch(url);
-        if (!res.ok) throw await res.json();
         let data = await res.json();
-        renderResult(data);
     } catch (err) {
-        showError(err.message || "Không tìm thấy dữ liệu, vui lòng kiểm tra lại thông tin.");
     }
     loading.style.display = "none";
 });
-// Hiển thị kết quả
 function renderResult(data) {
     resultArea.innerHTML = `
         <div class="card shadow p-3">
             <h5 class="mb-3 text-success">Kết quả tra cứu:</h5>
             <table class="table table-bordered align-middle">
                 <tbody>
-                    <tr><th scope="row">Tỉnh/TP cũ</th><td>${data.oldProvince || ''}</td></tr>
-                    <tr><th scope="row">Quận/Huyện cũ</th><td>${data.oldDistrict || ''}</td></tr>
-                    <tr><th scope="row">Phường/Xã cũ</th><td>${data.oldWard || ''}</td></tr>
-                    <tr class="table-secondary"><th scope="row">Tỉnh/TP mới</th><td>${data.newProvince || ''}</td></tr>
-                    <tr class="table-secondary"><th scope="row">Phường/Xã mới</th><td>${data.newWard || ''}</td></tr>
-                    <tr><th scope="row">Cấp hành chính mới</th><td>${data.newLevel || ''}</td></tr>
                 </tbody>
             </table>
         </div>
     `;
 }
-// Hiển thị lỗi
-function showError(msg) {
     resultArea.innerHTML = `
-        <div class="alert alert-danger">
-            <b>Lỗi:</b> ${msg}
         </div>
     `;
 }
-// Initial load
 loadProvinces();
 </script>
 </body>

 <html lang="vi">
 <head>
     <meta charset="UTF-8">
+    <title>Tra cứu Đơn vị Hành chính - Luat.AI API</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Bootstrap 5 CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Choices.js cho select tìm kiếm nhanh -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
+    <style>
+        .choices__inner { min-height: 42px !important; }
+        .loading-spinner {
+            width: 1.5rem;
+            height: 1.5rem;
+            border: .25em solid #0d6efd;
+            border-right-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+    </style>
 </head>
 <body class="bg-light">
 <div class="container py-5">
             <div class="row mb-3">
                 <div class="col-md-4 mb-2">
                     <label for="province" class="form-label">Tỉnh/Thành phố cũ</label>
+                    <select class="form-select" id="province" required>
+                        <option value="">-- Chọn/Tìm tỉnh/thành phố --</option>
                     </select>
                 </div>
                 <div class="col-md-4 mb-2">
                     <label for="district" class="form-label">Quận/Huyện cũ</label>
+                    <select class="form-select" id="district">
+                        <option value="">-- Chọn/Tìm quận/huyện --</option>
                     </select>
                 </div>
                 <div class="col-md-4 mb-2">
                     <label for="ward" class="form-label">Phường/Xã cũ</label>
+                    <select class="form-select" id="ward">
+                        <option value="">-- Chọn/Tìm phường/xã --</option>
                     </select>
                 </div>
             </div>
             <button class="btn btn-primary" type="submit" id="searchBtn">
+                <span id="searchIcon" class="me-1">🔎</span>Tra cứu
             </button>
+            <button class="btn btn-outline-secondary ms-2" type="button" id="resetBtn">Làm mới</button>
+            <span id="loading" style="display:none;" class="ms-3"><span class="loading-spinner"></span> Đang xử lý...</span>
         </form>
     </div>
     <div id="resultArea"></div>
 </div>
+<!-- Choices.js: Tìm kiếm nhanh select -->
+<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
 <script>
 const apiBase = "https://api.luat.ai/administrative";
 const provinceSel = document.getElementById("province");
 const resultArea = document.getElementById("resultArea");
 const searchForm = document.getElementById("searchForm");
 const loading = document.getElementById("loading");
+const resetBtn = document.getElementById("resetBtn");
+// Choices.js: Giao diện và tìm nhanh select
+let provinceChoices = new Choices(provinceSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
+let districtChoices = new Choices(districtSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
+let wardChoices = new Choices(wardSel, { searchEnabled: true, itemSelectText: '', shouldSort: false });
 async function loadProvinces() {
     let res = await fetch(apiBase + '/provinces');
     let data = await res.json();
+    let opts = data.map(p => ({ value: p, label: p }));
+    provinceChoices.setChoices([{ value: '', label: '-- Chọn/Tìm tỉnh/thành phố --', selected: true, disabled: true }, ...opts], 'value', 'label', true);
 }
 provinceSel.addEventListener("change", async function() {
+    districtChoices.clearStore(); wardChoices.clearStore();
+    districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện --', selected: true, disabled: true }], 'value', 'label', true);
+    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã --', selected: true, disabled: true }], 'value', 'label', true);
     if (!this.value) return;
     let res = await fetch(apiBase + '/districts?province=' + encodeURIComponent(this.value));
     let data = await res.json();
+    let opts = data.map(d => ({ value: d, label: d }));
+    districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện --', selected: true, disabled: true }, ...opts], 'value', 'label', true);
 });
 districtSel.addEventListener("change", async function() {
+    wardChoices.clearStore();
+    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã --', selected: true, disabled: true }], 'value', 'label', true);
     if (!this.value || !provinceSel.value) return;
     let res = await fetch(apiBase + '/wards?province=' + encodeURIComponent(provinceSel.value) + '&district=' + encodeURIComponent(this.value));
     let data = await res.json();
+    let opts = data.map(w => ({ value: w, label: w }));
+    wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã --', selected: true, disabled: true }, ...opts], 'value', 'label', true);
 });
+// Tra cứu
 searchForm.addEventListener("submit", async function(e) {
     e.preventDefault();
     resultArea.innerHTML = "";
     let url = apiBase + '/search?' + params.join('&');
     try {
         let res = await fetch(url);
         let data = await res.json();
+        // Nếu trả về mảng (nhiều kết quả)
+        if (Array.isArray(data)) {
+            if (data.length === 0) return showError("Không tìm thấy dữ liệu, vui lòng kiểm tra lại thông tin.");
+            renderMultiResult(data);
+        }
+        // Nếu trả về object (1 kết quả)
+        else if (data && data.id) renderResult(data);
+        else showError("Không tìm thấy dữ liệu, vui lòng kiểm tra lại thông tin.");
     } catch (err) {
+        showError(err.message || "Lỗi hệ thống hoặc API.");
     }
     loading.style.display = "none";
 });
+resetBtn.addEventListener("click", function() {
+    provinceChoices.setChoiceByValue('');
+    districtChoices.clearStore(); districtChoices.setChoices([{ value: '', label: '-- Chọn/Tìm quận/huyện --', selected: true, disabled: true }], 'value', 'label', true);
+    wardChoices.clearStore(); wardChoices.setChoices([{ value: '', label: '-- Chọn/Tìm phường/xã --', selected: true, disabled: true }], 'value', 'label', true);
+    resultArea.innerHTML = "";
+});
+// Hiển thị kết quả 1 dòng
 function renderResult(data) {
     resultArea.innerHTML = `
         <div class="card shadow p-3">
             <h5 class="mb-3 text-success">Kết quả tra cứu:</h5>
             <table class="table table-bordered align-middle">
                 <tbody>
+                    <tr><th>Tỉnh/TP cũ</th><td>${data.oldProvince || ''}</td></tr>
+                    <tr><th>Quận/Huyện cũ</th><td>${data.oldDistrict || ''}</td></tr>
+                    <tr><th>Phường/Xã cũ</th><td>${data.oldWard || ''}</td></tr>
+                    <tr class="table-secondary"><th>Tỉnh/TP mới</th><td>${data.newProvince || ''}</td></tr>
+                    <tr class="table-secondary"><th>Phường/Xã mới</th><td>${data.newWard || ''}</td></tr>
+                    <tr><th>Cấp hành chính mới</th><td>${data.newLevel || ''}</td></tr>
                 </tbody>
             </table>
         </div>
     `;
 }
+// Hiển thị nhiều kết quả
+function renderMultiResult(list) {
     resultArea.innerHTML = `
+        <div class="card shadow p-3">
+            <h5 class="mb-3 text-success">Có ${list.length} kết quả:</h5>
+            <div style="max-height:350px;overflow:auto;">
+            <table class="table table-bordered table-hover align-middle small">
+                <thead class="table-light"><tr>
+                    <th>Tỉnh/TP cũ</th><th>Quận/Huyện cũ</th><th>Phường/Xã cũ</th>
+                    <th>Tỉnh/TP mới</th><th>Phường/Xã mới</th><th>Cấp mới</th>
+                </tr></thead>
+                <tbody>
+                ${list.map(d=>`
+                    <tr>
+                        <td>${d.oldProvince||''}</td>
+                        <td>${d.oldDistrict||''}</td>
+                        <td>${d.oldWard||''}</td>
+                        <td>${d.newProvince||''}</td>
+                        <td>${d.newWard||''}</td>
+                        <td>${d.newLevel||''}</td>
+                    </tr>
+                `).join('')}
+                </tbody>
+            </table></div>
         </div>
     `;
 }
+function showError(msg) {
+    resultArea.innerHTML = `<div class="alert alert-danger"><b>Lỗi:</b> ${msg}</div>`;
+}
 loadProvinces();
 </script>
 </body>