JavaScript实现实时表格数据过滤：无需回车键的交互式搜索-php教程-PHP中文网

JavaScript实现实时表格数据过滤：无需回车键的交互式搜索

本文旨在详细指导如何使用javascript实现客户端表格数据的实时过滤功能，使用户在输入搜索关键词时无需按下回车键即可动态更新表格显示。文章将介绍两种主要的javascript实现方法：基于`onkeyup`事件的传统方式及其修正，以及利用`input`事件监听和`queryselectorall`的现代优化方案，同时提供完整的html、css和php数据加载示例，并强调关键的注意事项和最佳实践。

1. 概述与需求分析

在网页应用中，用户经常需要从大量数据中快速查找特定信息。传统的搜索方式通常要求用户输入关键词后点击搜索按钮或按下回车键。然而，为了提供更流畅、更即时的用户体验，实时过滤（或称即时搜索）功能变得越来越普遍。这种功能允许表格内容在用户输入字符时立即根据输入进行筛选和显示，无需额外的交互操作。

本教程将围绕一个从JSON数据源获取数据并以HTML表格形式展示的场景，详细讲解如何通过JavaScript在客户端实现这一实时过滤功能。

2. 页面基础结构与样式

首先，我们需要构建一个包含搜索输入框和数据表格的HTML页面，并为其应用基本的样式。

2.1 HTML 结构

一个标准的实时过滤页面应包含一个文本输入框（用于用户输入搜索关键词）和一个表格（用于展示数据）。为了更好的语义化和可访问性，建议表格使用和

结构。

立即学习“Java免费学习笔记（深入）”；




    
    实时表格过滤
     



    
    

    
    
        
            
                Id
                Bin
                Tür
                Banka Adı
                Type
                Name
                Oluşturma Tarihi
                Güncelleme Tarihi
            
        
        
            
            
            
                1 123456 类型A 银行X Card John Doe 2023-01-01 2023-01-01
            
            
                2 654321 类型B 银行Y Account Jane Smith 2023-01-02 2023-01-02
            
            
                3 987654 类型A 银行Z Card Peter Jones 2023-01-03 2023-01-03

Id	Bin	Tür	Banka Adı	Type	Name	Oluşturma Tarihi	Güncelleme Tarihi
1	123456	类型A	银行X	Card	John Doe	2023-01-01	2023-01-01
2	654321	类型B	银行Y	Account	Jane Smith	2023-01-02	2023-01-02
3	987654	类型A	银行Z	Card	Peter Jones	2023-01-03	2023-01-03

2.2 CSS 样式

为了使表格和搜索框具有良好的视觉效果，我们可以应用以下CSS样式。将这些样式保存为style.css文件。

/* style.css */
* {
  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; /* 表头和鼠标悬停行的背景色 */
}

3. 数据加载 (PHP示例)

虽然本教程主要关注客户端过滤，但表格数据通常来自后端。以下是一个使用PHP从外部JSON URL获取数据并填充表格的示例。

标签内输出这些行
foreach($data as $record) {
    echo "";
    echo "" . htmlspecialchars($record["id"]) . "";
    echo "" . htmlspecialchars($record["bin"]) . "";
    echo "" . htmlspecialchars($record["tur"]) . "";
    echo "" . htmlspecialchars($record["banka_adi"]) . "";
    echo "" . htmlspecialchars($record["type"]) . "";
    echo "" . htmlspecialchars($record["name"]) . "";
    echo "" . htmlspecialchars($record["created_at"]) . "";
    echo "" . htmlspecialchars($record["updated_at"]) . "";
    echo "";
}
?>

注意: 在实际应用中，为了防止XSS攻击，请务必使用htmlspecialchars()或其他适当的函数对从外部获取的数据进行转义。