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来制作数据列表并添加搜索过滤功能。
以上就是HTML、CSS和jQuery:制作一个带有搜索过滤的数据列表的详细内容,更多请关注php中文网其它相关文章!
已抢67217个
抢已抢40620个
抢已抢22807个
抢已抢2895个
抢已抢4568个
抢已抢19654个
抢