HTML, CSS 및 jQuery를 사용하여 동적 검색 예측 기능을 만드는 방법

HTML, CSS, jQuery를 사용하여 동적 검색 연관 기능을 만드는 방법

인터넷이 발달하면서 검색 기능은 우리 일상 생활에서 없어서는 안 될 부분이 되었습니다. 사용자의 검색 경험을 향상시키기 위해 동적 검색 연결 기능이 일반적인 요구 사항이 되었습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 간단하고 효과적인 검색 예측 기능을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

우선 관련 자료를 준비해야 합니다. 최신 버전의 jQuery가 설치되어 있는지 확인하고 HTML 페이지에 다음을 추가하세요:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. HTML Structure

다음으로 HTML 구조를 구축해야 합니다. 입력 상자 뒤에 예상 검색 결과를 표시할 영역을 추가합니다. 예:

<input type="text" id="searchInput" placeholder="输入关键词">
<div id="suggestions"></div>

3. CSS 스타일

예상 검색 결과가 페이지의 적절한 스타일로 표시되도록 하려면 몇 가지 CSS 스타일을 추가해야 합니다. . 다음은 간단한 CSS 예입니다.

#suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 200px;
    display: none;
    z-index: 999;
}

#suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#suggestions li {
    padding: 10px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #f0f0f0;
}

이 CSS 코드는 검색 예측 결과의 표시 영역에 대한 몇 가지 기본 스타일을 제공합니다.

4. jQuery 구현

이제 검색 연관 기능을 구현해 보겠습니다. 다음은 기본 코드 예입니다.

$(document).ready(function() {
    $('#searchInput').on('input', function() {
        var keyword = $(this).val();
        
        if (keyword.length >= 1) {
            // 发送Ajax请求到后端，获取搜索联想结果
            $.ajax({
                url: 'search_suggestions.php', // 替换为你的后端接口地址
                type: 'GET',
                dataType: 'json',
                data: { keyword: keyword },
                success: function(response) {
                    if (response.length > 0) {
                        var suggestions = '';
                        
                        // 构建搜索联想结果列表
                        for(var i = 0; i < response.length; i++) {
                            suggestions += '<li>' + response[i] + '</li>';
                        }
                        
                        // 将搜索联想结果显示在页面上
                        $('#suggestions').html('<ul>' + suggestions + '</ul>').show();
                    } else {
                        $('#suggestions').hide();
                    }
                },
                error: function() {
                    // 错误处理
                }
            });
        } else {
            $('#suggestions').hide();
        }
    });
    
    // 监听对搜索联想结果的点击事件
    $(document).on('click', '#suggestions li', function() {
        var suggestion = $(this).text();
        
        // 将选中的搜索联想结果填充到输入框中
        $('#searchInput').val(suggestion);
        
        $('#suggestions').hide();
    });
    
    // 点击页面其他区域时隐藏搜索联想结果
    $(document).on('click', function(e) {
        if (!$(e.target).is('#searchInput')) {
            $('#suggestions').hide();
        }
    });
});

이 코드에서는 먼저 입력 상자의 input 이벤트를 수신합니다. 입력 상자에 텍스트 입력이 있으면 Ajax를 통해 백엔드에 요청을 보내 검색을 얻습니다. 협회 결과. 그런 다음 백엔드에서 반환된 결과를 기반으로 검색 예측 결과 목록이 작성되어 페이지에 표시됩니다.

동시에 사용자가 예측 결과를 클릭하면 입력 상자에 결과가 채워지고 검색 예측 결과가 숨겨지는 이벤트도 모니터링했습니다.

마지막으로, 사용자가 페이지의 다른 영역을 클릭하면 검색 연결 결과가 숨겨집니다.

5. 백엔드 처리

위 코드의 Ajax 요청 부분은 실제 상황에 따라 교체되어야 합니다. 일반적으로 백엔드는 검색 연관 로직을 처리하고 관련 연관 결과를 반환해야 합니다. 백엔드의 실제 상황에 따라 코드를 수정할 수 있습니다.

위는 HTML, CSS 및 jQuery를 사용하여 동적 검색 연관 기능을 생성하기 위한 자세한 단계와 특정 코드 예제입니다. 이 기능을 통해 사용자는 키워드 입력 과정에서 관련 검색 연관 결과를 실시간으로 얻을 수 있어 검색의 편의성과 정확성이 향상된다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 HTML, CSS 및 jQuery를 사용하여 동적 검색 예측 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!