实时表格数据筛选：无需回车键的动态搜索实现

<?php
// 假设这是您的JSON数据源URL
$json_url = "https://example.com/api/data.json"; // 替换为您的实际URL

// 获取JSON数据
$json = file_get_contents($json_url);
$data = json_decode($json, TRUE);

// 输出表格的头部
echo '<table id="myTable">'; // 注意：这里的ID与JavaScript中的ID保持一致
echo '<thead>';
echo '<tr class="header">';
echo '<th>Id</th>';
echo '<th>Bin</th>';
echo '<th>Tür</th>';
echo '<th>Banka Adı</th>';
echo '<th>Type</th>';
echo '<th>Name</th>';
echo '<th>Oluşturma Tarihi</th>';
echo '<th>Güncelleme Tarihi</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';

// 遍历数据并输出表格行
if (!empty($data)) {
    foreach($data as $record) {
        echo '<tr>';
        echo '<td>' . htmlspecialchars($record["id"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["bin"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["tur"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["banka_adi"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["type"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["name"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["created_at"]) . '</td>';
        echo '<td>' . htmlspecialchars($record["updated_at"]) . '</td>';
        echo '</tr>';
    }
} else {
    echo '<tr><td colspan="8">暂无数据</td></tr>';
}

echo '</tbody>';
echo '</table>';
?>

<input type="text" id="myInput" placeholder="在此搜索..." title="输入关键词进行搜索" autocomplete="off" />

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png'); /* 搜索图标路径 */
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px; /* 留出左侧空间给图标 */
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}

<!-- HTML部分，添加onkeyup事件 -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="在此搜索..." title="输入关键词进行搜索" autocomplete="off" />

<!-- ... PHP生成的表格内容 ... -->

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); // 获取输入值并转为大写
  table = document.getElementById("myTable"); // 确保ID与PHP生成的表格ID一致
  tr = table.getElementsByTagName("tr"); // 获取所有行

  // 从第二行开始遍历，跳过表头
  for (i = 1; i < tr.length; i++) {
    // 获取第6个单元格（索引为5，因为从0开始计数）
    // 假设我们要根据"Name"列进行筛选，"Name"是表格的第6列
    td = tr[i].getElementsByTagName("td")[5]; 
    if (td) {
      txtValue = td.textContent || td.innerText; // 获取单元格文本内容
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = ""; // 匹配成功，显示该行
      } else {
        tr[i].style.display = "none"; // 匹配失败，隐藏该行
      }
    }
  }
}
</script>

<!-- HTML部分，移除onkeyup事件，因为它将通过JavaScript动态绑定 -->
<input type="text" id="myInput" placeholder="在此搜索..." title="输入关键词进行搜索" autocomplete="off" />

<!-- ... PHP生成的表格内容 ... -->

<script>
window.addEventListener("load", () => {
  const myInput = document.getElementById("myInput");
  const myTableBody = document.querySelector("#myTable tbody"); // 获取表格的tbody
  const tableRows = myTableBody ? myTableBody.querySelectorAll("tr") : []; // 获取tbody下的所有行

  myInput.addEventListener("input", e => { // 监听input事件，比keyup更通用
    const filter = e.target.value.toUpperCase(); // 获取输入值并转为大写

    tableRows.forEach(row => {
      // 假设我们要根据"Name"列进行筛选，"Name"是表格的第6列（索引为5）
      const targetCell = row.cells[5]; 
      if (targetCell) {
        const cellText = targetCell.textContent || targetCell.innerText;
        // 如果有筛选条件且当前单元格内容不包含筛选条件，则隐藏该行
        row.hidden = filter && !cellText.toUpperCase().includes(filter);
      }
    });
  });
});
</script>