jquery中list怎么过滤-CFANZ编程社区

jQuery中如何过滤列表项

在前端开发中，尤其是在处理大量数据时，如何快速找到特定项成了一个常见的问题。在jQuery中，使用过滤功能来查找和展示特定的列表项是一种非常高效的方法。本篇文章将通过一个示例来演示如何在一个简单的列表中实现过滤功能。

问题描述

假设你有一个包含用户姓名的列表，用户希望能够根据输入的关键字动态地过滤这些姓名，以便迅速找到自己想要的信息。我们将创建一个简单的HTML列表，并使用jQuery来实现过滤功能。

示例代码

首先，我们创建一个基本的HTML结构，包含一个搜索框和一个列表。以下是HTML代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery过滤列表</title>
    <script src="
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 8px;
            cursor: pointer;
        }
        li.hidden {
            display: none;
        }
    </style>
</head>
<body>
    用户姓名列表
    <input type="text" id="filterInput" placeholder="输入姓名搜索...">
    <ul id="userList">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        <li>孙七</li>
    </ul>

    <script>
        $(document).ready(function() {
            $("#filterInput").on("keyup", function() {
                var filter = $(this).val().toLowerCase();
                $("#userList li").each(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filter) > -1);
                });
            });
        });
    </script>
</body>
</html>

代码解析

HTML布局：我们创建了一个输入框和一个无序列表来存放用户姓名。
jQuery逻辑：
- 我们使用keyup事件监听输入框的变化。
- 在回调函数中，获取用户输入并将其转换为小写形式，以确保过滤过程不区分大小写。
- 遍历列表中的每个项，使用indexOf方法检查当前项的文本是否包含用户输入的关键字，如果不包含则将其隐藏。

实际效果

用户在输入框输入关键字后，列表会即时响应并显示匹配的姓名，这样用户可以快速找到自己想要的信息。

类图

为了加强对程序结构的理解，我们使用Mermaid语法描绘出如下类图：

classDiagram
    class UserList {
        -listItems: List<string>
        +filter(): void
        +display(): void
    }
    class FilterInput {
        -value: string
        +onKeyup(): void
    }
    UserList -> FilterInput : uses