首頁  >  文章  >  web前端  >  HTML、CSS和jQuery:製作一個帶有搜尋過濾的資料列表

HTML、CSS和jQuery:製作一個帶有搜尋過濾的資料列表

WBOY
WBOY原創
2023-10-26 08:30:51977瀏覽

HTML、CSS和jQuery:製作一個帶有搜尋過濾的資料列表

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn