使用 jQuery 进行页面内容的筛选和搜索是一个非常实用的功能，特别是当你有大量内容需要用户能快速查找时。以下是如何使用 jQuery 实现内容筛选和搜索的一些基本步骤和示例代码。

1. HTML 结构
首先，创建一个基本的 HTML 结构，包括一个输入框用于输入搜索关键词，以及一系列可搜索的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Content Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search...">

<div class="content">
    <div class="item">Apple</div>
    <div class="item">Banana</div>
    <div class="item">Cherry</div>
    <div class="item">Date</div>
    <div class="item">Elderberry</div>
</div>

<script src="script.js"></script>
</body>
</html>

2. CSS 样式（可选）
提供一些基本样式，使搜索结果更易于阅读。

.hidden {
    display: none;
}

3. jQuery 脚本
使用 jQuery 来添加搜索功能，根据用户输入过滤内容。

$(document).ready(function() {
    $('#searchInput').on('keyup', function() {
        var value = $(this).val().toLowerCase(); // 获取用户输入，并转为小写
        
        $('.content .item').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

在这个脚本中，每当用户在搜索框中键入时（keyup 事件），代码会获取输入框的值并将其转换为小写。然后，它会遍历所有 .item 元素，并使用 jQuery 的 .toggle() 方法显示或隐藏文本中包含搜索词的元素。

这种方法在实现时非常简洁，适用于文本内容的实时搜索。jQuery 的 .filter() 方法是执行此类操作的强大工具，它允许你根据任何条件动态显示或隐藏元素集合中的元素。

增强功能
为了提高用户体验和功能性，你还可以添加一些额外的功能，如:

延迟搜索功能：使用 setTimeout() 和 clearTimeout() 来添加小延迟，防止每次按键都执行搜索，特别是在处理大量数据时。
高亮显示搜索词：在显示匹配项时，可以通过添加额外的标记或样式来高亮显示匹配的搜索词。
无结果提示：当没有搜索结果时，显示一个“无结果”提示给用户。
这些额外功能可以使你的内容筛选和搜索功能更加完善和用户友好。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/content.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！