HTML, CSS 및 jQuery: 검색 필터링을 사용하여 데이터 목록 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 검색 필터링을 사용하여 데이터 목록 만들기

WBOY

풀어 주다： 2023-10-26 08:30:51

원래의

980명이 탐색했습니다.

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라는 새 파일을 만들고 다음 코드를 파일에 복사합니다. 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.jsrrreee

위 코드에서는 $(document).ready(function() {.. .})를 사용합니다. 페이지가 로드된 후 코드가 실행되도록 합니다. 검색 입력 상자의 키보드 입력 이벤트를 수신하여 입력 상자의 검색 키워드를 가져옵니다.

다음으로 filter 메소드를 통해 모든 데이터 항목을 순회하고, 검색 키워드를 기준으로 조건에 맞지 않는 데이터 항목을 숨깁니다. toggle 메소드는 데이터 항목을 표시하거나 숨기는 데 사용됩니다. 🎜🎜script.js 파일을 저장하고 HTML 코드에 포함하세요. 이제 입력창에 키워드를 입력해 보면, 검색 결과를 바탕으로 실시간으로 데이터 목록이 필터링되는 것을 확인할 수 있습니다. 🎜🎜위의 HTML, CSS 및 jQuery 코드 예제를 사용하여 검색 필터링 기능이 포함된 데이터 목록을 성공적으로 생성했습니다. 필요에 따라 스타일과 기능을 추가로 사용자 정의할 수 있습니다. 이 예제가 HTML, CSS 및 jQuery를 사용하여 데이터 목록을 만들고 검색 필터링 기능을 추가하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 HTML, CSS 및 jQuery: 검색 필터링을 사용하여 데이터 목록 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!