HTML, CSS dan jQuery: membuat senarai data dengan penapisan carian-tutorial js-php.cn

HTML, CSS dan jQuery: membuat senarai data dengan penapisan carian

WBOY

Lepaskan： 2023-10-26 08:30:51

asal

966 orang telah melayarinya

HTML, CSS dan jQuery: membuat senarai data dengan penapisan carian

Dalam pembangunan web, paparan data dan fungsi carian Selalunya penting. Untuk memudahkan pengguna mencari maklumat yang mereka perlukan, kami boleh menggunakan HTML, CSS dan jQuery untuk membuat senarai data dengan fungsi penapisan carian. Contoh kod khusus diperincikan di bawah.

Pertama, kita memerlukan struktur HTML untuk memaparkan senarai data. Berikut ialah contoh mudah:

<!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>

Salin selepas log masuk

Dalam kod di atas, kami mencipta kotak input dan senarai tidak tertib untuk memaparkan senarai data. Kotak input digunakan untuk memasukkan kata kunci carian, dan senarai tidak tersusun digunakan untuk memaparkan item data.

Untuk melaksanakan fungsi penapisan carian, kami juga perlu menulis beberapa kod jQuery. Buat fail baharu bernama script.js dan salin kod berikut ke dalam fail: 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);
        });
    });
});

Salin selepas log masuk

以上代码使用了$(document).ready(function() {...})来确保页面加载完成后执行代码。它监听搜索输入框的键盘输入事件，并获取输入框中的搜索关键字。

接下来，通过filter方法遍历所有数据项，并根据搜索关键字隐藏不符合条件的数据项。toggle方法用于显示或隐藏数据项。

保存script.jsrrreee

Kod di atas menggunakan $(document).ready( function() {...}) untuk memastikan bahawa kod dilaksanakan selepas halaman dimuatkan. Ia mendengar peristiwa input papan kekunci kotak input carian dan memperoleh kata kunci carian dalam kotak input.

Seterusnya, lintasi semua item data melalui kaedah penapis dan sembunyikan item data yang tidak memenuhi syarat berdasarkan kata kunci carian. Kaedah togol digunakan untuk menunjukkan atau menyembunyikan item data. #🎜🎜##🎜🎜#Simpan fail script.js dan perkenalkan dalam kod HTML. Sekarang, cuba masukkan kata kunci dalam kotak input, dan anda boleh melihat bahawa senarai data ditapis dalam masa nyata berdasarkan hasil carian. #🎜🎜##🎜🎜#Dengan contoh kod HTML, CSS dan jQuery di atas, kami berjaya mencipta senarai data dengan fungsi penapisan carian. Anda boleh menyesuaikan lagi gaya dan fungsinya mengikut keperluan anda. Semoga contoh ini akan membantu anda lebih memahami cara menggunakan HTML, CSS dan jQuery untuk membuat senarai data dan menambah fungsi penapisan carian. #🎜🎜#

Atas ialah kandungan terperinci HTML, CSS dan jQuery: membuat senarai data dengan penapisan carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!