HTML、CSS和jQuery：制作一個帶有搜索過濾的數據列表

2021-10-22 22:26:48 前端筆記 86

在網頁開發中，數據的展示和搜索功能常常是必不可少的。為了讓用戶更方便地查找所需信息，我們可以通過使用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 #c;
        }
    </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="code.jquery./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);
        });
    });
});

接下來，通過filter方法遍歷所有數據項，并根據搜索關鍵字隱藏不符合條件的數據項。toggle方法用于顯示或隱藏數據項。

保存script.js文件，并在HTML代碼中引入該文件?，F在，嘗試在輸入框中輸入關鍵字，可以看到數據列表根據搜索結果進行了實時的過濾。

通過以上的HTML、CSS和jQuery代碼示例，我們成功地創建了一個帶有搜索過濾功能的數據列表。你可以根據自己的需求對其進行進一步的樣式和功能定制。希望這個示例能幫助你更好地理解如何使用HTML、CSS和jQuery來制作數據列表并添加搜索過濾功能。

猜您喜歡的源碼 帝國CMS系統下載模板，系統下載源碼，win10模板，手機端數據同步插件

帝國CMS簡潔大方系統下載模板，系統下載源碼，win10模板，帶手機同步插件