test/index.html at master · LinMask/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>健檢醫療機構查詢（可輸入選單）</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4 bg-light">

  <h3 class="mb-4">🏥 勞工健康檢查認可醫療機構</h3>

  <!-- 🔍 可輸入搜尋的選單 -->
  <div class="mb-3">
    <label for="hospitalInput" class="form-label fw-bold">請輸入或選擇醫療機構名稱：</label>
    <input class="form-control w-75" list="hospitalList" id="hospitalInput" placeholder="輸入關鍵字或選擇醫療機構...">
    <datalist id="hospitalList"></datalist>
  </div>

  <!-- 🧾 顯示醫療機構資訊 -->
  <div id="info" class="mt-4"></div>

  <script>
    const apiUrl = "https://apiservice.mol.gov.tw/OdService/rest/datastore/A17000000J-020057-Nvt";
    const input = document.getElementById("hospitalInput");
    const datalist = document.getElementById("hospitalList");
    const info = document.getElementById("info");
    let allRecords = [];

    // 🚀 載入 API 資料
    async function loadData() {
      try {
        const res = await fetch(apiUrl);
        const data = await res.json();
        allRecords = data.result.records;

        // 依醫療機構名稱排序
        allRecords.sort((a, b) => a["醫療機構名稱"].localeCompare(b["醫療機構名稱"], "zh-Hant"));

        // 填入 datalist
        allRecords.forEach(r => {
          const opt = document.createElement("option");
          opt.value = r["醫療機構名稱"];
          datalist.appendChild(opt);
        });
      } catch (err) {
        console.error("載入資料失敗：", err);
        info.innerHTML = `<div class="alert alert-danger">無法載入資料，請稍後再試。</div>`;
      }
    }

    // 當使用者選擇或輸入醫療機構名稱時顯示詳細資訊
    input.addEventListener("change", () => {
      const keyword = input.value.trim();
      const selected = allRecords.find(r => r["醫療機構名稱"] === keyword);

      if (!selected) {
        info.innerHTML = `<div class="alert alert-warning">找不到該醫療機構，請確認名稱是否正確。</div>`;
        return;
      }

      info.innerHTML = `
        <div class="card shadow-sm p-3 bg-white rounded">
          <h5 class="card-title">${selected["醫療機構名稱"]}</h5>
          <p class="card-text mb-1"><strong>縣市別：</strong>${selected["縣市別"]}</p>
          <p class="card-text mb-1"><strong>地址：</strong>${selected["醫療機構地址"]}</p>
          <p class="card-text mb-1"><strong>聯絡人：</strong>${selected["勞工健檢聯絡人"]}</p>
          <p class="card-text mb-1"><strong>電話：</strong>${selected["連絡電話"]} 分機 ${selected["分機號碼"]}</p>
          <p class="card-text"><strong>認可類別：</strong>${selected["認可類別及有效期限"]}</p>
        </div>
      `;
    });

    loadData();
  </script>
</body>
</html>