HTML、CSS和jQuery：制作一个带有搜索过滤的数据列表
在网页开发中，数据的展示和搜索功能常常是必不可少的。为了让用户更方便地查找所需信息，我们可以通过使用HTML、CSS和jQuery来制作一个带有搜索过滤功能的数据列表。下面将详细介绍具体的代码示例。
首先，我们需要一个HTML结构来展示数据列表。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>数据列表</title>
<style>
/* CSS样式 */
.container {
max-width: 500px;
margin: 0 auto;
}
#search-input {
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
#data-list {
list-style-type: none;
padding: 0;
}
.data-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="search-input" placeholder="搜索">
<ul id="data-list">
<li class="data-item">数据1</li>
<li class="data-item">数据2</li>
<li class="data-item">数据3</li>
<li class="data-item">数据4</li>
<li class="data-item">数据5</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>在上述代码中，我们创建了一个输入框和一个无序列表来展示数据列表。输入框用于输入搜索关键字，无序列表用于展示数据项。
立即学习“前端免费学习笔记（深入）”；
为了实现搜索过滤功能，我们还需要编写一些jQuery代码。新建一个名为script.js的文件，并将以下代码复制到该文件中：
$(document).ready(function() {
// 监听搜索输入框的键盘输入事件
$('#search-input').on('keyup', function() {
var searchText = $(this).val().toLowerCase();
// 遍历所有数据项
$('#data-list .data-item').filter(function() {
var itemText = $(this).text().toLowerCase();
// 隐藏不符合搜索关键字的数据项
$(this).toggle(itemText.indexOf(searchText) > -1);
});
});
});以上代码使用了$(document).ready(function() {...})来确保页面加载完成后执行代码。它监听搜索输入框的键盘输入事件，并获取输入框中的搜索关键字。
接下来，通过filter方法遍历所有数据项，并根据搜索关键字隐藏不符合条件的数据项。toggle方法用于显示或隐藏数据项。
保存script.js文件，并在HTML代码中引入该文件。现在，尝试在输入框中输入关键字，可以看到数据列表根据搜索结果进行了实时的过滤。
通过以上的HTML、CSS和jQuery代码示例，我们成功地创建了一个带有搜索过滤功能的数据列表。你可以根据自己的需求对其进行进一步的样式和功能定制。希望这个示例能帮助你更好地理解如何使用HTML、CSS和jQuery来制作数据列表并添加搜索过滤功能。
