집 >백엔드 개발 >PHP 튜토리얼 >PHP에서 검색창 자동 완성 기능을 구현하는 방법

PHP에서 검색창 자동 완성 기능을 구현하는 방법

PHPz원래의: 2024-03-07 08:00:121176검색

검색창 자동 완성은 사용자 경험을 개선하고 검색 프로세스를 단순화하는 일반적인 웹 기능입니다. PHP의 검색창 자동 완성 기능은 Ajax 비동기 요청을 통해 구현할 수 있습니다. 구체적인 구현 방법은 프런트엔드 코드와 백엔드 코드 예제를 포함하여 아래에 소개됩니다.

프런트엔드 코드 예:

<!-- index.html -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>搜索框自动补全</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>搜索框自动补全示例</h1>

<input type="text" id="search" placeholder="输入关键词搜索">

<div id="suggestions">
</div>

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

/* styles.css */

#suggestions {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    max-width: 300px;
}

// script.js

$(document).ready(function(){
    $('#search').keyup(function(){
        var keyword = $(this).val();
        if(keyword != ''){
            $.ajax({
                url: 'autocomplete.php',
                type: 'post',
                data: {keyword: keyword},
                success: function(response){
                    $('#suggestions').html(response);
                    $('#suggestions').show();
                }
            });
        } else {
            $('#suggestions').hide();
        }
    });
});

백엔드 PHP 코드 예:

// autocomplete.php

<?php

$keywords = ['PHP', 'JavaScript', 'Python', 'HTML', 'CSS', 'MySQL', 'AJAX' ]; // 模拟关键词数据源

if(isset($_POST['keyword'])){
    $input = $_POST['keyword'];
    $suggestions = '';
    
    foreach($keywords as $word){
        if(stripos($word,$input) !== false){
            $suggestions .= '<div>' . $word . '</div>';
        }
    }
    
    echo $suggestions;
}

?>

위 코드 예에서 프런트엔드는 검색창에 키워드를 입력할 때 jQuery를 사용하여 Ajax 요청을 구현하고, 백엔드는 end PHP는 수신된 키워드 데이터를 사용하여 퍼지 매칭을 수행하고 일치하는 키워드 목록을 반환하며, 최종적으로 페이지에 표시되며 검색창의 자동 완성 기능을 구현합니다. 사용자가 검색어를 입력하면 일치하는 키워드 프롬프트가 실시간으로 나타나 검색의 정확성과 효율성이 향상됩니다.

위에 제공된 PHP를 통해 검색창 자동 완성 기능을 구현하기 위한 방법 및 코드 예제가 이 기능을 구현하고 웹사이트 검색의 사용자 경험을 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 PHP에서 검색창 자동 완성 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php jquery ajax 异步

성명：

이전 기사：Red Hat에 PHP 및 MySQL을 설치하는 단계에 대한 자세한 소개다음 기사：Red Hat에 PHP 및 MySQL을 설치하는 단계에 대한 자세한 소개