HTML、CSS和jQuery：制作一個帶有搜索過濾的數(shù)據(jù)列表
在網(wǎng)頁開發(fā)中，數(shù)據(jù)的展示和搜索功能常常是必不可少的。為了讓用戶更方便地查找所需信息，我們可以通過使用HTML、CSS和jQuery來制作一個帶有搜索過濾功能的數(shù)據(jù)列表。下面將詳細介紹具體的代碼示例。
首先，我們需要一個HTML結(jié)構(gòu)來展示數(shù)據(jù)列表。以下是一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<title>數(shù)據(jù)列表</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">數(shù)據(jù)1</li>
<li class="data-item">數(shù)據(jù)2</li>
<li class="data-item">數(shù)據(jù)3</li>
<li class="data-item">數(shù)據(jù)4</li>
<li class="data-item">數(shù)據(jù)5</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
登錄后復制
在上述代碼中，我們創(chuàng)建了一個輸入框和一個無序列表來展示數(shù)據(jù)列表。輸入框用于輸入搜索關(guān)鍵字，無序列表用于展示數(shù)據(jù)項。
為了實現(xiàn)搜索過濾功能，我們還需要編寫一些jQuery代碼。新建一個名為script.js的文件，并將以下代碼復制到該文件中：
$(document).ready(function() {
// 監(jiān)聽搜索輸入框的鍵盤輸入事件
$('#search-input').on('keyup', function() {
var searchText = $(this).val().toLowerCase();
// 遍歷所有數(shù)據(jù)項
$('#data-list .data-item').filter(function() {
var itemText = $(this).text().toLowerCase();
// 隱藏不符合搜索關(guān)鍵字的數(shù)據(jù)項
$(this).toggle(itemText.indexOf(searchText) > -1);
});
});
});
登錄后復制
以上代碼使用了$(document).ready(function() {...})來確保頁面加載完成后執(zhí)行代碼。它監(jiān)聽搜索輸入框的鍵盤輸入事件，并獲取輸入框中的搜索關(guān)鍵字。
接下來，通過filter方法遍歷所有數(shù)據(jù)項，并根據(jù)搜索關(guān)鍵字隱藏不符合條件的數(shù)據(jù)項。toggle方法用于顯示或隱藏數(shù)據(jù)項。
保存script.js文件，并在HTML代碼中引入該文件。現(xiàn)在，嘗試在輸入框中輸入關(guān)鍵字，可以看到數(shù)據(jù)列表根據(jù)搜索結(jié)果進行了實時的過濾。
通過以上的HTML、CSS和jQuery代碼示例，我們成功地創(chuàng)建了一個帶有搜索過濾功能的數(shù)據(jù)列表。你可以根據(jù)自己的需求對其進行進一步的樣式和功能定制。希望這個示例能幫助你更好地理解如何使用HTML、CSS和jQuery來制作數(shù)據(jù)列表并添加搜索過濾功能。
以上就是HTML、CSS和jQuery：制作一個帶有搜索過濾的數(shù)據(jù)列表的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
