列表视图-使用jQuery搜索带有筛选器的列表

基础概念

列表视图是一种常见的用户界面元素，用于展示一系列项目，通常以列表的形式呈现。每个项目可以是文本、图像或其他元素的组合。

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

搜索带有筛选器的列表是指用户可以通过输入关键词或选择特定条件来过滤显示的列表项，从而只显示符合条件的项目。

类型

文本搜索：根据输入的关键词匹配列表项中的文本。
属性筛选：根据列表项的特定属性（如类别、日期等）进行筛选。
组合筛选：同时使用多个条件进行筛选。

应用场景

电商网站的产品列表：用户可以根据品牌、价格区间等条件筛选商品。
社交媒体应用的朋友列表：通过姓名、兴趣等条件查找好友。
数据管理后台的记录列表：管理员可以根据多种属性快速定位到特定的数据记录。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现一个带有文本搜索和属性筛选器的列表视图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Filter List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search...">
<select id="filterSelect">
    <option value="all">All</option>
    <option value="fruit">Fruit</option>
    <option value="vegetable">Vegetable</option>
</select>

<ul id="itemList">
    <li data-type="fruit">Apple</li>
    <li data-type="fruit">Banana</li>
    <li data-type="vegetable">Carrot</li>
    <li data-type="vegetable">Broccoli</li>
    <!-- 更多列表项 -->
</ul>

<script>
$(document).ready(function() {
    $('#searchInput').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('#itemList li').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });

    $('#filterSelect').change(function() {
        var selectedType = $(this).val();
        if (selectedType === 'all') {
            $('#itemList li').show();
        } else {
            $('#itemList li').hide().filter('[data-type="' + selectedType + '"]').show();
        }
    });
});
</script>

</body>
</html>