HTML, CSS and jQuery: making a list of data with search filtering-JS Tutorial-php.cn

HTML, CSS and jQuery: making a list of data with search filtering

WBOY

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

Original

1005 people have browsed it

HTML, CSS and jQuery: making a list of data with search filtering

HTML, CSS and jQuery: Make a data list with search filtering

In web development, data display and search functions are often essential . In order to make it easier for users to find the information they need, we can use HTML, CSS and jQuery to create a data list with search filtering function. Specific code examples are detailed below.

First, we need an HTML structure to display the data list. The following is a simple example:

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

Copy after login

In the above code, we create an input box and an unordered list to display the data list. The input box is used to enter search keywords, and the unordered list is used to display data items.

In order to implement the search filtering function, we also need to write some jQuery code. Create a new file named script.js and copy the following code into the file:

$(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);
        });
    });
});

Copy after login

The above code uses $(document).ready(function() {...}) to ensure that the code is executed after the page is loaded. It listens to the keyboard input events of the search input box and obtains the search keywords in the input box.

Next, traverse all data items through the filter method, and hide data items that do not meet the conditions based on the search keywords. toggleMethod is used to show or hide data items.

Save the script.js file and introduce it into the HTML code. Now, try to enter keywords in the input box, and you can see that the data list is filtered in real time based on the search results.

Through the above HTML, CSS and jQuery code examples, we successfully created a data list with search filtering function. You can further customize its style and functionality according to your needs. Hopefully this example will help you better understand how to use HTML, CSS, and jQuery to make data lists and add search filtering capabilities.

The above is the detailed content of HTML, CSS and jQuery: making a list of data with search filtering. For more information, please follow other related articles on the PHP Chinese website!